Как использовать проверку формы на ion-select в ionic 3

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>

Я хочуПользователь не может оформить заказ, пока пользователь не выберет дату доставки и время доставки.Если он разместил заказ, не выбрав дату и время, на экране отобразится сообщение об ошибке «PLease Select delivery and time» . Как это сделать.Пожалуйста, помогите мне.

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 */

  }