Angular 如何重置角度反应形式

我试过，但没能找到重新设置我的角度形状的方法

有人能帮忙吗

<form #thisIsAForm>
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="resetForm()">Reset</button>

export class Example{
  @ViewChild('thisIsAForm') thisIsAForm;

  resetForm() {
    this.thisIsAForm.reset();
  }
}

重置
导出类示例{
@ViewChild（“thisIsAForm”）thisIsAForm；
重置表单（）{
this.thisIsAForm.reset（）；
}
}

差不多了！使用反应形式：

<form [formGroup]="myForm">
  <mat-form-field class="full-width">
    <input matInput placeholder="Weather" formControlName="weather">
  </mat-form-field>
</form>
<button mat-raised-button (click)="myForm.reset()">Reset</button>


export class Example{
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { 
    this.myForm = fb.group({
      weather: ''
    });
  }

  // If the HTML code doesn't work, simply call this function
  reset() {
    this.myForm.reset();
  }
}

重置
导出类示例{
myForm:FormGroup；
构造函数（私有fb:FormBuilder）{
this.myForm=fb.group({
天气：''
});
}
//如果HTML代码不起作用，只需调用此函数
重置（）{
这个.myForm.reset（）；
}
}

重置
导出类示例{
这是一个表格：表格组；
构造函数（）{
this.thisIsAForm=新表单组(
天气：新FormControl（“”）
); 
}
重置表单（）{
this.thisIsAForm.reset（）；
}
}

在这里，我正在重置模板驱动的表单，而不会使表单变脏

    <form class="example-form" #charreplaceform="ngForm">
          <mat-form-field class="example-full-width">
            <input matInput #codepointSel="ngModel" (change)="createReplacementChar()" (keyup)="checkForNumber()"
              required [(ngModel)]="charReplaceInfo.codePoint" name="code-point" placeholder="Code Point (Only number)"
              [disabled]="isDisabled">
          </mat-form-field>

          <a (click)="refreshCharRecord(charreplaceform)">
            <i class="material-icons">
              loop
            </i>
          </a>
    </form>

    // in .ts
    refreshCharRecord(form: NgForm) { // getting the form reference from template 
    form.form.reset();   // here we are resetting the form without making form dirty
  }

环
//in.ts
refreshCharRecord（表单：NgForm）{//从模板获取表单引用
form.form.reset（）；//这里我们正在重置表单，而不会使表单变脏
}

在角度8中，如果您这样做

<form #form="ngForm" (ngSubmit)="process(form)">

process(form: NgForm) { ...

---

请参见

我认为您需要在html代码中添加ngForm指令，如下所述stackbliz示例还将name和ngModel ngControl添加到表单元素中

对于我来说，将type=“reset”添加到重置按钮解决了问题

<button **type = "reset"** mat-raised-button (click)="resetForm()">Reset</button>

重置

Arg@trichetriche更快：p这在stackblitz中非常有效，但是当我在实际代码中使用它时，我得到了一个可怕的错误

无法绑定到“formGroup”，因为它不是“form”的已知属性。

。我检查了所有内容，发现已正确导入FormsModule和ReactiveFormsModule。。。我不明白出了什么问题，把它擦掉！我发现我是个白痴。我忘记了使用clear form功能的组件本身是通过另一个导入文件导入app.module.ts的，因此我添加了

ReactiveFormsModule

作为中间文件的导入，一切都很好！

<form #form (ngSubmit)="process(form)">

@ViewChild('form', { static: false }) FormGroupDirective formDirective;

<button **type = "reset"** mat-raised-button (click)="resetForm()">Reset</button>