如何在 Angular 中将表单控件重置为原始状态？

Question

如果我有下面的表单控件，

<mat-form-field class="example-full-width">
    <input matInput placeholder="First Name" type="text" class="form-control" name="firstName" [(ngModel)]="firstName">
</mat-form-field>

如何从组件将其状态重置回 ng-pristine？

Answer 1

这会将表单中的每个 ngModel 标记为原始状态。如果您想将特定的原始标记为原始，只需在 forEach 循环中添加一个条件即可

class //bla bla bla {
@ViewChildren(NgModel) fields: QueryList<NgModel>;

// stuffs

checkErrors() {
  this.fields.forEach(model => {
    model.control.markAsPristine();
  }
};

如果您想重置您的值，只需model.control.reset();在原始标记之前添加即可