Mixing
determine if checkbox is selected angular typescript
determine if checkbox is selected angular typescript
Wanting to determine if a checkbox has been selected in the latest version of angular using an if statement.
My code:
<mat-menu #wj="matMenu">
<section><mat-checkbox (id)='1' (click)="$event.stopPropagation()">Cool Kids</mat-checkbox></section>
</mat-menu>
<div class="float-right">
<mat-action-row>
<button mat-button color="primary" (click) = "generateLink()" >Generate Link</button>
</mat-action-row>
AND IN component.ts:
generateLink() {
<HTMLInputElement>document.getElementById('1')
if(<HTMLInputElement>document.getElementById('1')){
console.log('y');
}
}
The idea is that once the submit button is pressed, the generateLink() method will evaluate to see all of the checkboxes checked by ID. If there is a better method to do this then please share. Essentially, there are 15 checkboxes, and I need to collect all of their values in an array at the end when a submit button is pressed.
generateLink()
angularjs
angular 2, my apologies
– dataviews
Jun 29 at 18:12
You're missing the whole point of angular: you shouldn't get values from the DOM. The single point of truth is the model, and the view is bound to the model. Read the guides on forms, and bind your input to your model. Then you can just know, from the model, whether the checkbox is checked or not. angular.io/guide/reactive-forms
– JB Nizet
Jun 29 at 18:43
2 Answers
2
First of all, you should know that mat-checkbox generates an inner id for the MatCheckbox object.
Secondly, I agree that you should manage your elements state via Forms.
However, if you still want to track whether certain checkboxes are checked or not, you could track it.
Link: stackblitz.com
Simply, I am using a service to emit each selected checkbox as a MatCheckbox object.
Then, I iterate over the MatCheckbox array when the Button is clicked, and each iteration the checked object will be evaluated and print its id to the console just for demo purpose.
Hope it helps.
My advise would be to use the Reactive forms instead. That way, you would have more control over your form.
// In your typescript
myForm: FormGroup;
mycheckboxControl: FormControl;
constructor(private _fb: FormBuilder) {
this.mycheckboxControl = new FormControl();
this.mycheckboxControl
.valueChanges.subscribe((res) => console.log(res));
this.myForm = this._fb.group({
checkobx: this.mycheckboxControl
});
}
// In your HTML
<form [formGroup]="myForm">
<input type="checkbox" [formControl]="mycheckboxControl">
You can play more with form here
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Are you using AngularJS or Angular 2+? I removed AngularJS because it appears as though you are using Angular 2+, and
angularjsis the incorrect tag for that framework.– Mike McCaughan
Jun 29 at 18:11