Angular 11 中点击按钮调用myForm.reset()无法重置表单如何解决

出现这个现象和你的模块导入、reset()方法本身的实现没有任何关系，核心是Angular模板驱动表单的控件追踪规则没有满足。

• 你表单里的文本输入框，既没有加ngModel指令做绑定，也没有设置必填的name属性。
• Angular的NgForm实例只会主动追踪同时带name属性和ngModel指令的表单控件，没有被纳入追踪范围的原生输入框，完全不受myForm.reset()方法的管控，调用reset时自然不会触发清空效果。
• 原生<input type="reset">能正常清空输入，是因为这是浏览器内置的DOM层面的表单行为：直接把表单内所有原生控件的value恢复到页面初始加载的状态，整个过程完全不经过Angular的表单状态管理逻辑，所以和Angular封装的reset方法生效范围没有可比性。

只需要给需要被Angular表单管控的文本输入框，补上表单绑定要求的两个必要配置即可：

<form #myForm="ngForm">
  <!-- 补上name属性和ngModel绑定 -->
  <input type="text" name="userInput" ngModel>
  <input type="reset" value="原生重置">
  <button type="button" (click)="myForm.reset();">Angular表单重置</button>
</form>

补充说明：

• 补完绑定后，无论是调用myForm.reset()还是myForm.resetForm()，都可以正常清空输入值，同时同步重置表单的脏值标记、验证状态。
• 注意如果只给输入框加了name属性但没加ngModel，控件依然不会被NgForm追踪，还是无法触发Angular层面的重置效果。
• 你当前的FormsModule导入配置是正确的，粘贴代码里FormsModule末尾多余的逗号不会影响运行，不是导致问题的原因，不需要调整模块导入逻辑。

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