Angular 4中表单重置后验证功能失效技术问询

我之前也碰到过类似的坑，模板驱动表单里直接访问NgForm实例的内部form属性确实容易出现状态不同步的问题，尤其是在调用reset()之后。咱们一步步来解决：

核心问题分析 #

你之前用simpleForm.form.valid能工作，但重置后失效，本质是因为simpleForm作为模板引用变量指向的是NgForm实例，它本身已经封装了表单的状态属性（比如valid、invalid），而内部的form属性是FormGroup对象，重置后Angular的变更检测可能没有及时同步它的状态到视图层。

解决方案：直接使用NgForm的状态属性 #

只需要把提交按钮的disabled绑定从!simpleForm.form.valid改成!simpleForm.valid即可，代码如下：

修改后的按钮代码 #

<button class="btn btn-standard" name="refresh" (click)="simpleForm.reset()">Refresh</button>
<button class="btn btn-standard" name="submit" [disabled]="!simpleForm.valid" (click)="doAction()">Submit</button>

确认表单模板引用变量的正确声明 #

同时要确保你的表单标签正确绑定了模板引用变量，比如：

<form #simpleForm="ngForm">
  <!-- 示例表单控件，必须带有ngModel和name属性才能被NgForm追踪 -->
  <div class="form-group">
    <label>用户名</label>
    <input type="text" name="username" ngModel required>
  </div>
  <!-- 其他表单控件 -->
</form>

为什么这样能解决问题？ #

NgForm实例会自动监听所有表单控件的状态变化，包括调用reset()后的状态重置。直接访问它的valid属性，Angular的变更检测会实时同步视图，不会出现重置后状态失效的情况。

如果出于某些原因你必须使用内部的form属性，也可以在重置后手动触发状态更新，但这完全没必要：

// 不推荐，只是备选方案
refreshForm() {
  this.simpleForm.reset();
  this.simpleForm.form.markAsPristine();
  this.simpleForm.form.markAsUntouched();
  this.simpleForm.form.updateValueAndValidity();
}

内容的提问来源于stack exchange，提问作者user2907330