时间戳

首页 > 解决方案 > 如何在离子角度中使用 [disabled] 和两个选项

angular - 如何在离子角度中使用 [disabled] 和两个选项

问题描述

这是我的 page.html：

<ion-content *ngIf="charged">
Id ordine: {{order.id_acg}} Peso articolo(g): Altezza(cm): Larghezza(cm): lunghezza(cm): 
<ion-list *ngFor="let riga of order.righe">
  <ion-item>
    <ion-label>Riga da preparare:<strong>{{riga.idRiga}}</strong> </ion-label>
    <ion-checkbox [(ngModel)]="riga.checked" name="id_riga"  value="option" (click)="onChange(option)"></ion-checkbox>
  </ion-item>
  
</ion-list>
<ion-button color="success" type="submit" expand="block" [disabled]=" !f.valid && checkedItems.length <1 " >Crea spedizione
</ion-button>

<ion-button color="success" type="submit" expand="block" [disabled]=" !f.valid && checkedItems.length <1 " (* <== do something like that*)> Crea spedizione </ion-button>

我希望仅在编译所有输入并且选中几乎一个复选框时启用确认按钮，我知道这样做但分开，而不是一起。谢谢大家！！

更新：这是预览离子内容的形式：

  <form #f="ngForm" (ngSubmit)="onUpdate()" class="ion-text-center ion-margin-bottom ion-margin-top">
<ion-card-title><strong> Id ordine: </strong>{{order.id_acg}}</ion-card-title>
<ion-item>
  <ion-label>Peso articolo(g): </ion-label>
  <ion-input required type="number" name="peso" [(ngModel)]="order.peso" placeholder="es: 1500"></ion-input>
</ion-item>
<ion-item>
  <ion-label>Altezza(cm): </ion-label>
  <ion-input required type="number" name="altezza" [(ngModel)]="order.altezza" placeholder="es: 0.60"></ion-input>
</ion-item>
<ion-item>
  <ion-label>Larghezza(cm): </ion-label>
  <ion-input required type="number" name="larghezza" [(ngModel)]="order.larghezza" placeholder="es: 0.30">
  </ion-input>
</ion-item>
<ion-item>
  <ion-label>lunghezza(cm): </ion-label>
  <ion-input required type="number" name="lunghezza" [(ngModel)]="order.lunghezza" placeholder="es: 0.20">
  </ion-input>
</ion-item>
<ion-list *ngFor="let riga of order.righe">
  <ion-item>
    <ion-label>ID Riga da preparare: <strong> {{riga.idRiga}}</strong> </ion-label>
    <ion-checkbox [(ngModel)]="riga.checked" name="id_riga"  value="option" (click)="onChange(option)"></ion-checkbox>
  </ion-item>
  
</ion-list>
<ion-button color="success" type="submit" expand="block" [disabled]=" !(f.valid && checkedItems.length > 1)" >Crea spedizione
</ion-button>

标签： angulartypescriptionic-framework

解决方案

您可以使用这样的条件

至少有一个复选框被选中

[disabled]="!(f.valid && checkedItems.length > 1)"

需要检查所有复选框

[disabled]="!(f.valid && checkedItems.length == order.righe.length)"

将复选框更新为此

<ion-checkbox [(ngModel)]="riga.checked" name="id_riga"  (ionChange)="onChange()"></ion-checkbox>

用这个更新 onChange 函数

onChange() {
   this.checkedItems = this.order.righe.filter((d: any) => d.checked);
}

推荐阅读