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>

输入Component.ts：

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

在此trackForm.reset（）无法正常工作。我从Angular IO文档中看到的唯一区别是我使用单独的输入组件。

不确定为什么不起作用。有帮助吗？

Answer 1

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

尝试将其移动到组件之外，然后将其放入表单中，或者在刷新表单时刷新输入的模型。

希望有帮助！

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

1 个答案: