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

Question

我想提供一个选项，允许用户在选择后决定不选择选项时清除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;
  }
}

在此处查找工作示例

Answer 2

我想出的另一个选择是并行使用两个排他性的相同离子选择，并由ngIf控制的渲染。如果 ngModel 有值，则渲染第一个离子选择，否则，第二个被渲染，因为在渲染新的离子选择时，默认情况下它不会有任何选定的选项，它对于(空和非空(ngModel 值都非常有效。