Angular:如何正确重置 react 形式

Question

此处使用 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>

下面是我的 Controller 中的重置按钮单击:

  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

Answer 1

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

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

(你的 stackblitz 有所帮助)

这可能在 html 中使用更好

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