Angular 7模板表单-form.reset（）不起作用答案

【问题标题】：Angular 7 template form - form.reset() not workingAngular 7模板表单-form.reset（）不起作用
【发布时间】：2019-06-13 23:36:47
【问题描述】：

我正在尝试重置我的表单输入值，它没有重置该值，也没有重置 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 文档中看到的唯一区别是我使用了单独的输入组件。

不知道为什么它不起作用。有什么帮助吗？

【问题讨论】：

标签： html angular angular-forms

【解决方案1】：

您要重置的 HTML 元素似乎不在您调用的表单中。

尝试将其移出组件并将其放入表单中，或者在您想要刷新表单时刷新您作为输入提供的模型。

希望对你有帮助！

【讨论】：

答案是在输入组件中应用“changeDetection: ChangeDetectionStrategy.OnPush”。我会尽快更新答案