Mam kilka pól wyboru i przycisk, który ma być włączony tylko wtedy, gdy co najmniej jedno pole wyboru jest zaznaczoneAngular2, przycisk wyłączania w przypadku braku wyboru wybrany
<input type="checkbox">VALUE1
<input type="checkbox">VALUE2
<input type="checkbox">VALUE3
<input type="checkbox">VALUE4
<button>Proceed</button>
Jak to osiągnąć stosując Angular2.
P.S: Znaleziono podobne pytania, ale nie za pomocą Angular2.
Jednym ze sposobów jest użycie ngModel każdego wyboru, a następnie kontrolowanie disabled własność przycisku za pomocą sposobu, który sprawdza każdy stan modelu wyboru:
@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);
}
}
Doceń podaną odpowiedź. Masz pomysł, dlaczego funkcja buttonState jest uruchamiana wiele razy? i jak uniknąć wielokrotnego uruchamiania? –
Interpolacja wyrażeń jest wykonywana za każdym razem, gdy Angular uzna, że pasuje (coś się wydarzyło w komponencie i Angular rozpoczął swój algorytm wykrywania zmian, aby zaktualizować zmienne związane z 2way). –
Jak zrobiłbyś to tylko wtedy, gdy WSZYSTKIE checkboe są wybierane? – Harry
pomocą propertie [wyłączenia] jako:
<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>
Dziękuję, ale mimo, że to działa, z wieloma polami wyboru, kończy się wybraniem a Jeśli wybrana zostanie jedna z nich, – Khaled
Zaktualizuj mój przykład. Zobacz teraz –
Działa to doskonale w przypadku statycznego kodu, ale gdy pola wyboru są tworzone dynamicznie, powiedz używając opcji '* ng-for' maybe only, używa się zmiennej Boole'a przypisanej na podstawie liczby zaznaczonych pól wyboru. – Khaled
Ty c wykonać dowolną akcję, używając opcji $ event w przypadku zmiany pola wyboru.
Próbka:
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;
}
}
spróbuj tego: * ng-if = "" –