如何在ionic 3中對ion-select使用形式驗證

Question

我是離子3的新手，我無法在離子3中的離子選擇上使用表單驗證。

HTML

   <ion-item class="side-heading-background delivery-date-header" no-lines>
        <ion-label color="side-heading-color">{{"Select Delivery Date and Time" | translate}} </ion-label>
    </ion-item>

        <ion-item>
          <ion-label>Select a Date</ion-label>
          <ion-select [(ngModel)]="newDate" interface ="popover">
            <div *ngFor="let newDate of dates">
            <ion-option >{{newDate}}</ion-option>
            </div>
          </ion-select>
        </ion-item>


    <ion-item>
       <ion-label>Select Time</ion-label>
          <ion-select  [(ngModel)] ="item" interface ="popover">
            <div *ngFor="let item of items">
               <ion-option > {{item}}</ion-option>
            </div>
          </ion-select>
    </ion-item>

我希望用戶在未選擇交貨日期和交貨時間之前不能下訂單。 如果他下訂單而不選擇日期和時間，則會顯示錯誤消息“請選擇交貨和時間” 。如何執行此操作。 請幫我。

Answer 1

您需要為離子標簽元素添加ngIf指令。 我已將其添加到您的代碼中： * ngIf =“ hasError” 。

HTML

<ion-item class="side-heading-background delivery-date-header" no-lines>
    <ion-label *ngIf="hasError" color="side-heading-color">{{"Select Delivery Date and Time" | translate}} </ion-label>
</ion-item>

<ion-item>
    <ion-label>Select a Date</ion-label>
    <ion-select [(ngModel)]="newDate" interface ="popover">
        <div *ngFor="let newDate of dates">
            <ion-option >{{newDate}}</ion-option>
        </div>
    </ion-select>
</ion-item>

<ion-item>
    <ion-label>Select Time</ion-label>
    <ion-select  [(ngModel)] ="item" interface ="popover">
        <div *ngFor="let item of items">
            <ion-option > {{item}}</ion-option>
        </div>
    </ion-select>
</ion-item>

和按鈕的處理程序：

<button ion-button (tap)="tapPlaceOrder()">Place order</button>

並定義您的處理程序和hasError

TS

  item: any;
  newDate: any;
  hasError: boolean = false;

  constructor() {
  }

  tapPlaceOrder() {

    if (!this.item || !this.newDate) {
       this.hasError = true;
       return;
    }

    this.hasError = false;

    /* place order */

  }