After my form submission, I cannot seem to reset the model

Question

I have a simple form that captures user data, and on submit stores those values and should reset the form to the original values. All the functionality works except the reset doesn't: All the values seem to be set to 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();   
  }

}

And the template:

<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>

I can't work out why the model doesn't update the values. I can see in the console it seems to set the values, but when I expand the object, all the values are null?

Answer 1

You can try below code:-

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();   
}

Hope it will resolve your issue.