ho più caselle di controllo e un pulsante che deve essere abilitato solo se si seleziona almeno una casella di controlloAngular2, pulsante Disabilita se non casella di controllo selezionato
<input type="checkbox">VALUE1
<input type="checkbox">VALUE2
<input type="checkbox">VALUE3
<input type="checkbox">VALUE4
<button>Proceed</button>
Come si raggiunge questo obiettivo con Angular2.
P.S: trovato domande simili ma non utilizzando Angular2.
Un modo è quello di utilizzare ngModel su ogni casella, quindi controllare la proprietà del pulsante disabled tramite un metodo che esamina ogni modello casella Stato:
@Component({
template: `
<label *ngFor="let cb of checkboxes">
<input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}
</label>
<p><button [disabled]="buttonState()">button</button>
`
})
class App {
checkboxes = [{label: 'one'},{label: 'two'}];
constructor() {}
buttonState() {
return !this.checkboxes.some(_ => _.state);
}
}
Apprezzi la risposta data. Qualche idea sul perché la funzione buttonState viene attivata più volte? e come evitare di innescare più volte? –
L'interpolazione delle espressioni viene eseguita ogni volta che Angular lo ritiene opportuno (qualcosa è accaduto nel componente e Angular ha iniziato il suo algoritmo di rilevamento delle modifiche per aggiornare le variabili associate a 2 vie) –
Come si farebbe solo se TUTTI i checkboes sono selezionati? – Harry
Utilizzare il propertie [disable] come:
<input type="checkbox" [(ng-model)]="disableButton1"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton2"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton3"> VALUE1
<input type="checkbox" [(ng-model)]="disableButton4"> VALUE1
<button type="button" [disabled]="disableButton || disableButton2">Submit</button>
Grazie, ma anche che funziona, con più checkbox, finisce per selezionare a ll se uno è selezionato – Khaled
Aggiorna il mio esempio. Guarda ora –
Funziona perfettamente nel caso di un codice statico, ma quando le caselle di controllo vengono create dinamicamente, ad esempio usando '* ng-for' forse l'unica opzione è usare una variabile booleana assegnata in base al conteggio delle caselle selezionate. – Khaled
È c eseguire un'azione qualsiasi utilizzando $ event in change event di checkbox.
campione:
HTML
<input type="checkbox" (change)="changeEvent($event)" />
<button [disabled]="toogleBool">button</button>
TS
toggleBool: boolean=true;
changeEvent(event) {
if (event.target.checked) {
this.toggleBool= false;
}
else {
this.toggleBool= true;
}
}
provare questo: * ng-if = "" –