如何在 Ionic 3 中重置 Ion-Select 表单字段？

Question

我想提供一个选项，允许用户在已经 selecting 之后决定不 select 选项时清除 ion-select 表单字段，但我有很难找到任何帮助。

<ion-item class="formField ionField">
        <ion-label color="primary" stacked>PROJECT</ion-label>
        <ion-select
          #projectName
          ngModel
          name="project"
          interface="action-sheet">
          <ion-option (ionSelect)="projectSelect(project.ProjectName,i)" [value]={ID:project.ID,Name:project.ProjectName} *ngFor="let project of projectArray; let i = index" >{{project.ProjectName}}</ion-option>
        </ion-select>
      </ion-item>

也许是这样的？ Ionic 没有任何重置资源。

<ion-option (ionChange)="resetValue()">Reset</ion-option>

感谢任何帮助。

Answer 1

您不能使用 ion-option 重置 ion-select 表单域。但是，如果选择 ion-option，您可以提供清除按钮来重置 ion-select，如下所示。

HTML

<ion-content padding>

  <ion-list>
  <ion-item>
    <ion-label>PROJECT</ion-label>
    <ion-select [(ngModel)]="project">
      <ion-option *ngFor="let project of projects" value="{{project}}">{{project}}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

<button *ngIf="project" ion-button (click)="reset()">clear</button>

</ion-content>

TS

export class HomePage {

  projects: any = [];
  project: string;

  constructor() {
    this.projects = ["project 1", "project 2", "project 3", "project 4"];
  }

  reset() {
    this.project = null;
  }
}

查找工作示例here

Answer 2

我想出的另一个选择是使用两个完全相同的 ion-select 并联使用它们由 ngIf 控制的渲染。如果 ngModel 有值，那么第一个 ion-select 被渲染，否则，第二个被渲染，因为在渲染一个新的 ion-select 时，它不会有任何 selected 选项默认情况下，它对（null 和非 null）ngModel 值都工作得很好。

如何在 Ionic 3 中重置 Ion-Select 表单字段？

How to reset Ion-Select form field in Ionic 3?

forms

ionic3

angular

ion-select