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>

并定义您的处理程序和有错误

TS

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

  constructor() {
  }

  tapPlaceOrder() {

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

    this.hasError = false;

    /* place order */

  }

如何在离子3

1 个答案: