Angular表单提交后无法重置model，值变为null问题求助

我有一个用于收集用户数据的Angular表单，提交时会存储数据并应将表单重置为初始值。目前所有功能正常，仅重置功能失效：所有值似乎都变为null。控制台显示似乎已设置值，但展开对象后所有值均为null。

组件代码 #

// Imports

@Component({
  selector: 'app-definitions',
  templateUrl: './definitions.component.html',
  styleUrls: ['./definitions.component.css', '../../assets/sass/shared.scss']
})
export class DefinitionsComponent implements OnInit {
  definitions: Definition[] = [];

  constructor(private definitionService: DefinitionService) { }

  model = {    
    name: '',
    measurement: '',
    unit: '',
    measurementToUnit: 0,
    price: 0
  };

  ngOnInit(): void {
    this.getDefinitions();    
  }

  getDefinitions(): void {
    ...
  }

  onSubmit(form: NgForm): void {

    this.definitionService.addDefinition(form.value as Definition)
      .subscribe(definition => {
        this.definitions.push(definition);
      });

    this.model.name = '';
    this.model.measurement = '';
    this.model.unit = '';
    this.model.measurementToUnit = 0;
    this.model.price = 0;

    form.resetForm();

    this.getDefinitions();   
  }

}

模板代码 #

<form #definitionsForm="ngForm" (ngSubmit)="onSubmit(definitionsForm)" class="qc-panel">
  <div class="mb-3">
    <label for="name" class="form-label">Name</label>
    <input type="text" class="form-control" id="name"
           required
           [(ngModel)]="model.name" name="name"
           #name="ngModel">
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
      Name is required
    </div>
  </div>
  <div class="mb-3">
    <label for="measurement" class="form-label">Measurement</label>
    <input type="text" class="form-control" id="measurement"
           required
           [(ngModel)]="model.measurement" name="measurement"
           #measurement="ngModel">
    <div [hidden]="measurement.valid || measurement.pristine" class="alert alert-danger">
      Measurement is required
    </div>
  </div>
  <div class="mb-3">
    <label for="unit" class="form-label">Unit</label>
    <input type="text" class="form-control" id="unitName"
           required
           [(ngModel)]="model.unit" name="unit"
           #unit="ngModel">
    <div [hidden]="unit.valid || unit.pristine" class="alert alert-danger">
      Unit is required
    </div>
  </div>
  <div class="mb-3">
    <label for="measurementToUnit" class="form-label">Measurement to unit</label>
    <input type="number" class="form-control" id="measurementToUnit"
           required
           [(ngModel)]="model.measurementToUnit" name="measurementToUnit"
           #measurementToUnit="ngModel">
    <div [hidden]="measurementToUnit.valid || measurementToUnit.pristine" class="alert alert-danger">
      Measurement to unit is required
    </div>
  </div>
  <div class="mb-3">
    <label for="price" class="form-label">Price</label>
    <div class="input-group">
      <span class="input-group-text" id="price-currency">$</span>
      <input type="number" class="form-control" id="price"
             aria-describedby="price-currency"
             required
             [(ngModel)]="model.price" name="price"
             format="N2"
             #price="ngModel">
    </div>
    <div [hidden]="price.valid || price.pristine" class="alert alert-danger">
      Price is required
    </div>
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="!definitionsForm.form.valid">Add</button>
</form>

问题原因 #

你当前代码同时执行了手动重置model属性和调用form.resetForm()两个操作。resetForm()方法默认会将表单控件值设为null，由于Angular双向绑定的实时性，这个操作会覆盖你手动设置的model值，最终导致所有值变为null。

解决方法 #

方案一：通过resetForm()传入初始值重置 #

无需手动逐个赋值，直接给resetForm()传入初始model对象，表单和model会同步被重置为初始状态，同时表单的校验状态也会自动重置：

onSubmit(form: NgForm): void {
  this.definitionService.addDefinition(form.value as Definition)
    .subscribe(definition => {
      this.definitions.push(definition);
    });

  // 传入初始值重置表单，同步更新model
  form.resetForm({    
    name: '',
    measurement: '',
    unit: '',
    measurementToUnit: 0,
    price: 0
  });

  this.getDefinitions();   
}

方案二：手动重置model并更新表单状态 #

依赖双向绑定自动同步表单控件值，同时手动重置表单的校验状态：

onSubmit(form: NgForm): void {
  this.definitionService.addDefinition(form.value as Definition)
    .subscribe(definition => {
      this.definitions.push(definition);
    });

  // 重置model为初始值
  this.model = {    
    name: '',
    measurement: '',
    unit: '',
    measurementToUnit: 0,
    price: 0
  };

  // 重置表单状态为未修改、未触碰
  form.form.markAsPristine();
  form.form.markAsUntouched();
  form.form.updateValueAndValidity();

  this.getDefinitions();   
}

推荐使用方案一，因为resetForm()会自动处理表单的所有状态，代码更简洁且不易出错。

内容的提问来源于stack exchange，提问作者sterix24