How to check on button click is the radio button checked angular2/typescript

Question

In my html :

<input #myRadio type="radio" name="category" id="work-time" />


<button (click)="myClick(myRadio)">save</button>

In my component:

myClick(_myRadio:HTMLElement)
{

}

I have tried to save the result in a boolean type variable, but there is no attribute isChecked or Value, so I am stuck in this.

How to check if the radio button is checked on the button click by the user?

you can still get the element like javascript as w3schools.com/jsref/prop_radio_value.asp here. But I do not think it would be the best practice. — Red fx
– Red fx, Commented Oct 26, 2017 at 7:41
ye, I know. I managed to do it with js, but it's now allowed to do it with js — AngularBeg
– AngularBeg, Commented Oct 26, 2017 at 7:43
You can pass the event inside your click and check what's in it as (click)="myClick($event)" and in your function get myClick(event: any) and print it to see what's passed — Red fx
– Red fx, Commented Oct 26, 2017 at 7:46
What i do is a suggestion, that does not solve the problem issued above — Red fx
– Red fx, Commented Oct 26, 2017 at 8:06

stealththeninja · Accepted Answer · 2017-10-26 08:02:51Z

1

Try ngModel:

<input type="checkbox" name="category" [(ngModel)]="category" />
<button (click)="myClick()">save</button>

NgModel binds the checkbox value (if checked true otherwise false) to a class property category. The method called by button click myClick() can then use the property:

myClick() {
  // do stuff with this.category;
}

If you'd prefer to not import the forms module, you can use property and event bindings on the input to accomplish the same result:

<input type="checkbox" name="category" [checked]="category" (click)="category = !category" />
<button (click)="myClick()">save</button>

edited Oct 26, 2017 at 8:02

answered Oct 26, 2017 at 7:42

stealththeninja

3,8012 gold badges30 silver badges44 bronze badges

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

2 Comments

AngularBeg Over a year ago

if the radio is checked and user clicks save I just need to set a boolean variable to be true so I can go in my if statement block.

stealththeninja Over a year ago

It sounds like the input type we're looking for is checkbox, it provides a boolean value: checked or not-checked. I'll update my answer.

Collectives™ on Stack Overflow

How to check on button click is the radio button checked angular2/typescript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related