以编程方式重置 Angular 模板驱动的表单答案

【问题标题】：Angular Template-Driven form reset programmatically以编程方式重置 Angular 模板驱动的表单
【发布时间】：2021-02-16 21:39:30
【问题描述】：

我是 Angular/Typescript 的新手，目前在 Angular 10 中使用模板驱动的表单。我正在尝试在不提交且不单击按钮的情况下重置表单。我已经检查了类似的问题，但它们都依赖于提交表单来重置它。我不断收到错误：

ERROR TypeError: Cannot read property 'reset' of undefined

下面是我的 TS 文件代码：

@ViewChild('visitorForm', { static: true }) visitorForm: NgForm;

constructor(private myService: MyService)
{
  this.myService.imagePosted.subscribe(
    userDetails => {
      this.userDetails = userDetails;
     this.visitorForm.reset();
    }
  );
}

这是我的 component.html：

<form (ngSubmit)="onSubmit(visitorForm)" #visitorForm="ngForm">
  <div class="row">
    <div class="col-md-10 form-group">
        <input 
        [ngModel]="visitor.firstName"
        required 
        type="text" 
        id="firstName" 
        name="firstName" 
        placeholder="First Name" 
        class="form-control"
        #firstName="ngModel">
    </div>
  </div>
</form>

我可以在提交时清除表单，或者如果我使用绑定了事件的按钮，但这不是我想要的。我希望能够在上面的订阅中重置表单。有人知道怎么做吗？

【问题讨论】：

标签： angular typescript forms angular10

【解决方案1】：

将代码移动到 ngAfterViewInit() 以便对表单的引用存在，然后尝试使用 resetForm()：

https://angular.io/guide/lifecycle-hooks

https://angular.io/guide/forms

使用不同方法重置模板驱动表单的 Stackblitz 演示：

https://stackblitz.com/edit/angular-workbench-template-driven-form

小心使用sintax，因为它非常棘手！ :-)

【讨论】：

感谢丹尼尔回复。不幸的是，我尝试了 resetForm() 并且收到了几乎相同的错误：ERROR TypeError: Cannot read property 'resetForm' of undefined
我明白了，问题是您在构造函数中调用它并且对表单的引用尚不可用。将该代码移至 ngOnInit() ，它应该可以工作。我已经编辑了答案。
刚刚尝试将其移动到 ngOnInit() 但没有运气。它仍然返回相同的未定义错误。
然后使用 hook ngAfterViewInit() 确保表单已经构建并且引用存在。更新了答案。
请看我准备的这个stackblitz，演示了模板驱动的表单重置，你可以看到表单是从模板、间隔和提交后重置的。小心使用sintax，非常棘手。 stackblitz.com/edit/angular-workbench-template-driven-form