Angular 7 template form - form.reset() not working

Question

I am trying to reset my form input value and it's not resetting the value nor the ngmodel control state.

here is my HTML:

TrackPage.html:

<form #trackForm="ngForm">
        <div class="form__field" style="padding-top: 10px; ">
          <search-input [(inputModel)]="trackingNumber" [label]="'tracking.tracking-placeholder' | translate">
          </search-input>
        </div>
        <div>
          <button id="trackBtn" type="button" class="track-button" [style.backgroundColor]="brand.style.mainColor"
            (click)="searchTracking(); trackForm.reset()"
            [style.color]="brand.style.fontColor">{{ 'tracking.tracking-btn' | translate | uppercase}}
          </button>
        </div>
      </form>

Input Component:

<input id="trackingNumber" [(ngModel)]="inputModel" [ngClass]="{ 'form__field--has-value': inputModel }" type="text"
  (ngModelChange)="changeData()" [required]="true" [style.font-family]="fontFamily" #spy />
<label for="trackingNumber" [style.font-family]="fontFamily">{{label}}</label>

Input Component.ts:

changeData() {
    this.inputModelChange.emit(this.inputModel);
    console.log(this.inputModel);
  }

Here trackForm.reset() is not working. The only difference I see from Angular IO documentation is I use separate input component.

Not sure why it's not working.Any help?

Answer 1

It looks like the HTML element you want to reset is not inside the form you're calling.

Try to move it outside of the component and put it inside form or just refresh the model you're giving as an input when you want to refresh the form.

Hope it helps!