I have multiple checkboxes and a button that has to be enabled only if at least one checkbox is selected
<input type="checkbox">VALUE1
<input type="checkbox">VALUE2
<input type="checkbox">VALUE3
<input type="checkbox">VALUE4
<button>Proceed</button>
How is this achieved using Angular2.
P.S: found similar questions but not using Angular2.
One way is to use ngModel on each checkbox, then control the button's disabled property via a method that examines each checkbox model state:
@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);
}
}
return !this.checkboxes.every(_ => _.state);
return !this.checkboxes.some(_ => _.state);Use the propertie [disable] as:
<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>
*ng-for perhaps only option is using a Boolean variable assigned based on the count of selected checkboxes.You can perform any action by using $event in change event of checkbox.
Sample:
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;
}
}
I faced same issue in my project and i solved it.
sample:
HTML
<table class="table">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items">
<td><input type="checkbox" [(ngModel)]="item.chosen"></td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
<button [disabled]="noneSelcted()">OK</button>
TS
import {Componnet} from '@angular/core'
@Componnet({
selector: 'my-test',
templateUrl: 'app/home/test.component.html'
})
export class TestComponent{
items = [
{ name: 'user1', chosen: false},
{ name: 'user2', chosen: false},
{ name: 'user3', chosen: false},
];
noneSelected(){
return !this.items.some(item => item.chosen);
}
}
