输入时提交，只有单选按钮的反应式表单 angular 5

Question

我有一个 form，它只包含 radio buttons 作为输入。我还有一个 submit button 提交 form。但我想在点击 回车键 时提交 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">

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

输入时提交，只有单选按钮的反应式表单 angular 5

submit on enter, reactive form with only radio buttons angular 5

angular

angular-reactive-forms

angular5