提交表单后，我似乎无法重置 model

Question

我有一个捕获用户数据的简单表单，并在提交时存储这些值，并且应该将表单重置为原始值。 所有功能都有效，但重置无效：所有值似乎都设置为 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 不更新值。 我可以在控制台中看到它似乎设置了值，但是当我展开 object 时，所有值都是 null？

Answer 1

您可以尝试以下代码：-

onSubmit(form: NgForm): void {

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

  form.resetForm({
  name: '',
  measurment: '',
  unit: '',
  measurmentToUnit: 0,
  price: 0
});

   this.getDefinitions();   
}

希望它能解决您的问题。