Angular 7 шаблон формы - form.reset () не работает

Question

Я пытаюсь сбросить свое входное значение формы, но оно не сбрасывает ни значение, ни состояние элемента управления ngmodel.

вот мой 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 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>

Компонент ввода.ts:

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

Здесь trackForm.reset () не работает.Единственное отличие, которое я вижу из документации Angular IO, заключается в том, что я использую отдельный компонент ввода.

Не уверен, почему он не работает. Любая помощь?

Answer 1

Похоже, элемент HTML, который вы хотите сбросить, находится не внутри формы, которую вы вызываете.

Попробуйте переместить его за пределы компонента и поместить в форму или просто обновить модель, которую вы вводите в качестве ввода, когда вы хотите обновить форму.

Надеюсь, это поможет!