时间戳

首页 > 解决方案 > Angular 7模板表单-form.reset（）不起作用

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

问题描述

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

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

标签： htmlangularangular-forms

解决方案

看起来您要重置的 HTML 元素不在您调用的表单中。

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

希望能帮助到你！

推荐阅读