determine if checkbox is selected angular typescript

Question

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.

Are you using AngularJS or Angular 2+? I removed AngularJS because it appears as though you are using Angular 2+, and angularjs is the incorrect tag for that framework. — Heretic Monkey
– Heretic Monkey, Commented Jun 29, 2018 at 18:11
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
– JB Nizet, Commented Jun 29, 2018 at 18:43

monogate · Accepted Answer · 2018-06-29 23:01:01Z

1

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.

answered Jun 29, 2018 at 23:01

monogate

1,4491 gold badge11 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shadab Faiz · Accepted Answer · 2018-06-29 18:45:27Z

0

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

answered Jun 29, 2018 at 18:45

Shadab Faiz

2,5182 gold badges22 silver badges32 bronze badges

Collectives™ on Stack Overflow

determine if checkbox is selected angular typescript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related