javascript - Angular 中有带验证的输入框时，需要点击两次才能将控制权转移到单选按钮

Question

我有一个输入框和一个单选框。当我点击输入框然后点击单选框时，我想控件应该立即转移到单选框。相反，第一次显示错误消息，第二次将控件转移到单选框。

您可以在这里找到问题的答案:No transfer of control to the radio box except after the second click

Answer 1

是的，那是因为您将错误显示为一个 block ，这会移动单选按钮。

想象一下，假设当鼠标按钮按下时错误弹出，而当鼠标按钮向上时单选框被选中。

这可能是一瞬间，但足以让您的用户上当受骗。

我会建议以另一种方式显示您的错误/为您的表单找到另一种布局，或者只是在提交时验证表单。

要在提交时验证表单，请使用 FormBuilder.group 调用的第二个参数:

this.myForm = fb.group({...}, { updateOn: 'submit' });

这是一个工作表单的示例，因为错误被模糊掉了而不是被删除了(hidden vs style.opacity):https://next.plnkr.co/edit/QEEviTpocGJ7QHus?open=lib%2Fapp.ts&deferRun=1