我想提供一个选项,允许用户清除 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>
<ion-option (ionChange)="resetValue()">Reset</ion-option>
感谢任何帮助。
最佳答案
您不能使用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
关于angular - 如何重置 Ionic 3 中的 Ion-Select 表单字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54576359/