Angular：如何正确重置反应形式答案

【问题标题】：Angular: How to correctly reset reactive formsAngular：如何正确重置反应形式
【发布时间】：2019-12-28 20:31:42
【问题描述】：

在此处使用 Angular 6 和反应形式。

我的页面上几乎没有带有提交和重置按钮的控件。所有控件都需要对其进行字段验证。当用户单击提交按钮时，应选择所有控件。单击重置按钮时，我想将所有控件重置为其初始状态。

下面是我的一个控件的html：

 <div class="form-group" [formGroup]="userForm">
  <label class="col-md-2 control-label">Environment</label>
  <div class="col-md-4" [ngClass]="{ 'has-error': userForm.hasError('required', ['environment']) && isSubmitted}">
    <select class="form-control input-large" formControlName="environment">
      <option value=''>-- Select --</option>
      <option [ngValue]="d.Id" *ngFor="let d of data">
        {{d.Name}}
      </option>
    </select>
    <div class="invalid-feedback">
      <em *ngIf="userForm.hasError('required', ['environment']) && isSubmitted">*Required</em>
    </div>
  </div>
</div>

下面是我的控制器中的重置按钮点击：

  resetClicked() { 
    this.createObjectForm.reset();    
  }

上面的代码可以工作，但问题是它还会再次触发所有验证，所以我的所有控件都变红了。

我搜索并尝试了以下代码：

  Object.keys(this.createObjectForm.controls).forEach(key => {
        this.userForm.get(key).clearValidators();
  });

但是这个只有当我点击我的重置按钮两次时才有效。

我也尝试了以下代码，但结果相同：

this.userForm.markAsPristine();
this.userForm.markAsUntouched();
this.userForm.updateValueAndValidity();

谁能提供他们的意见。

演示：https://stackblitz.com/edit/angular-v6l2z5-eseqlr

【问题讨论】：

你能创建一个 stackblitz 演示吗.....或上传你的代码....因为重置表单应该只是将表单重置为未触及状态。
添加脏检查。 has-error 只有在控件有错误且脏的情况下才应该可见。如果您重置表单，希望它会再次原始
@j4rey 我已经添加了我的演示
this.myReactiveForm.reset(this.myReactiveForm.value); stackoverflow.com/a/43759912/9945674

标签： angular

【解决方案1】：

为了正确重置响应式表单，您不应该发明解决方法，而是使用希望 Angular 和 html 给您：

<form [formGroup]="userForm" #ngForm="ngForm" (ngSubmit)="onSubmit()">

    <div *ngIf="... ngForm.submitted">
       Show errors
    </div>

    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
</form>

Forked Stackblitz

【讨论】：

【解决方案2】：

当您重置表单时，控件将返回其无效状态（尚未选择）。所以需要设置isSubmitted = false;

    resetClicked() {
     this.userForm.reset();  
     this.isSubmitted = false;
  }

（你的 stackblitz 帮助了）

这可能更好用在 html 中

<em *ngIf="userForm.controls.environment.invalid && isSubmitted">*Required</em>

【讨论】：

【解决方案3】：

您可以创建表单模板参考。

<form #formRef="ngForm"></form>

在你的组件类中访问它

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

然后您可以重置表单，包括所有验证器

this.createObjectForm.reset();
this.formRef.resetForm();

【讨论】：

这是用于模板驱动的表单而不是响应式表单
那是错误的。它与反应形式完美配合