設備上的Ionic 2數據綁定

Question

我想在字段爲空時禁用按鈕。

模板：

<ion-content padding text-center class="product"> 

     <ion-item> 
      <ion-input placeholder="Product" type="text" [(ngModel)]="product.productName"></ion-input> 
     </ion-item> 

     <ion-item> 
      <ion-input placeholder="Price" type="number" [(ngModel)]="product.price"></ion-input> 
     </ion-item> 

     <button ion-button block (click)="checkPrice()" [disabled]="!(product.price && product.productName) ? true : null">Сравнить цену</button> 

     <button ion-button block (click)="addToReceipt()" [disabled]="!(product.price && product.productName) ? true : null">Добавить в чек</button> 

當我在瀏覽器中運行這個 - 數據綁定工作正常。

，當我在設備上運行此 - 數據綁定不工作：

Answer 1

我認爲你可以在<ion-input>像做到這一點使用<form>和required：

<ion-content padding text-center class="product"> 
    <form #demoForm="ngForm"> 
     <ion-item> 
      <ion-input placeholder="Product" type="text" [(ngModel)]="product.productName" required></ion-input> 
     </ion-item> 

     <ion-item> 
      <ion-input placeholder="Price" type="number" [(ngModel)]="product.price" required></ion-input> 
     </ion-item> 
    </form> 
    <button ion-button block (click)="checkPrice()" [disabled]="!demoForm.form.valid">Сравнить цену</button> 

    <button ion-button block (click)="addToReceipt()" [disabled]="!demoForm.form.valid">Добавить в чек</button> 

只是一個例子。如果您有任何問題，您需要檢查代碼中的其他部分/條件。