无法在 Angular 11 中重置表单答案

【问题标题】：Cannot reset form in Angular 11无法在 Angular 11 中重置表单
【发布时间】：2021-03-24 05:00:11
【问题描述】：

在我的 Angular 组件中，我有这个 form，它有一个文本输入和两个按钮。

<form #myForm="ngForm">
   <input type="text">
   <input type="reset">
   <button type="button" (click)="myForm.reset();">Reset</button>
</form>

如果我单击第一个按钮，文本将被清除。如果我单击第二个，则没有任何反应。如何使用 Angular 重置表单？

浏览器的控制台没有显示任何异常。 FormsModule 被导入到我的 NgModule 中。

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes, {useHash: true}),
    HttpClientModule,
    FormsModule,

【问题讨论】：

标签： angular11

【解决方案1】：

也许这会对某人有所帮助。我发现添加ngModel 和name 就可以了。

<form #f="ngForm">
   <input name="item" ngModel>
   <button type="button" (click)="f.reset();">Reset</button>
</form>

是时候详细了解 Angular 表单了。这个教程貌似不错https://angular.io/guide/forms

【讨论】：