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

Question

这个问题已经有答案了:

Cleanest way to reset forms (16 个回答)

已关闭 5 年前。

如果我有以下表单控件，

<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(); 即可