在输入时提交，只有单选按钮 Angular 5 的反应形式

Question

我有一个 form，它只包含 radio buttons 作为输入。我还有一个submit button 提交form。但我想在点击 enter key 时提交form。以下是我到目前为止所做的。

<form [formGroup]="verificationOption" (keyup.enter)="sendVerificationCode()" (ngSubmit)="sendVerificationCode()">
    <input type="radio" formControlName="verificationType" [value]="message" checked>
    <span class="text_radio_space"> Text Message</span><br/><br/>
    <input type="radio" formControlName="verificationType" [value]="voicecall">
    <span class="text_radio_space"> Voice Call</span><br/><br/>
    <div class="text-right">
        <button type="submit" class="btn btn-design-auth">Send Code </button>
    </div>
</form>

默认情况下，第一个选项将被选中，当用户点击输入时，表单应该被提交。我已将(keyup.enter) 添加到form，但这似乎没有按预期工作。此外，如果用户选择任何其他选项或切换到不同的选项，并且当enter 被点击时，form 提交发生两次。这是因为form 上的(ngSubmit) 和(keyup.enter)。如何防止form submission 在这种情况下发生两次？

Answer 1

这是你的问题：

<button type="submit" class="btn btn-design-auth">Send Code </button>

替换为：

<input type="submit" class="btn btn-design-auth" value="Send Code">

这将启用使用 enter 键的提交。删除所有 (keyup.enter) 侦听器，您将不再需要它。