onBlur 和 onSubmit 上的 NgModel 更新

Question

我正在尝试使用仅更新 onBlur ( [ngFormOptions]="{updateOn: 'blur'}") 的输入创建表单。但这样做的一个副作用是，一旦用户点击“输入”，表单就不再提交，因为模型仅在模糊时更新。（同这个问题，但没有答案）

因此，表单被标记为无效，因为输入字段中有一个值，但模型尚未使用该值更新。

版本： - Angular 6.0.7 - @angular/forms6.0.7

---

HTML 示例

<form (ngSubmit)="login()" #loginForm="ngForm" [ngFormOptions]="{updateOn: 'blur'}" [validate-on-submit]="loginForm">
  <input type="text" ([NgModel])="user.username"/>
  <input type="password" ([NgModel])="user.password"/>
</form>

当在两个字段中输入有效文本并点击“回车”时，表单会验证并将密码（具有焦点的输入）标记为无效，因为 NgModel 尚未更新，因此该值无效。

---

我想要什么

因此，我正在寻找一种方法来验证两个onBlur藏汉作为onSubmit。我知道从 Angular 5 开始我们就有了 option [ngFormOptions]="{updateOn: 'blur'}"，但是有没有办法给这个对象提供 2 个参数？

（[ngFormOptions]="{updateOn: ['blur', 'submit']}"似乎不起作用）

差点忘了，我不希望模型更新onChange（创建烦人的消息，不是很有帮助，因为用户仍在打字..）

Answer 1

在表单中创建第三个不可见的输入，并为其指定一个模板变量。在提交之前，只需关注此输入，这将触发onBlur更新：

<form (ngSubmit)="focuser.focus(); login()" #loginForm="ngForm" [ngFormOptions]="{updateOn: 'blur'}">
  <input type="text" ([NgModel])="user.username"/>
  <input type="password" ([NgModel])="user.password"/>
  <input type="hidden" #focuser>
</form>

请注意，这是您可以使用的众多解决方法之一，而不是实际的解决方案