How to get the boolean value based on radio button selected in html using angular

Question

I have created two radio buttons like Order, and Cart as like below, and I just want to get the TRUE (if the radio button is checked and by default Order button is checked) and FALSE if its not checked in app.component.ts file in angular JS.

app.component.html

<div class="container">
    <form>
      <label class="radio-inline">
        <input type="radio" name="optradio" checked id="place_Oreder">Order
      </label>
      <label class="radio-inline">
        <input type="radio" name="optradio" id="add_cart">Cart
      </label>
    </form>
  </div>

I just written the following code which say if there is onclick on both button the boolean value will change:

isSelectedMSM:boolean=false;
isSelectedLive:boolean=false;

$(document).ready(function(){
  $("#place_Oreder").click(function(){
    this.isSelectedOrder=true;
  });
});

$(document).ready(function(){
  $("#add_cart").click(function(){
    this.isSelectedcart=true;
  });
});

I'm not sure that How can I print TRUE or FALSE in app.components file based on the radio button selected by user based on that I need to put if condition and call an appropriate service to invoke.

Can someone help me to achieve this? I just googled but I didn't find the right resource to implement the same. It would be much helpful if someone share your experience to solve this.

Update:

I'm not sure the above code will work. But can someone lead me that how can I achieve this in better way.

you don't actually have any angular code here. check out some examples of data binding, click handlers, etc. — aw04, Dec 26 '19 at 16:00
I'm new to Angular and not sure how to do that in angular js. So that posted question here. — ArrchanaMohan, Dec 26 '19 at 16:02
@aw04 just realized after your comment. Posted the answer with `ngForm` though. — Plochie, Dec 26 '19 at 16:02
@ArrchanaMohan I'd recommend checking out the docs at https://angular.io/start, there are some good examples/tutorials to get you started. Best of luck :) — aw04, Dec 26 '19 at 16:08
Please try not to use jquery with angular. Its not like it will not work, but you should not do it. as @aw04 said take some time to understand the concepts, angular can be overwhelming at start, but it provided features which doesnt requires any jquery. https://stackoverflow.com/questions/53534894/is-it-a-bad-practice-to-use-jquery-in-angular — Plochie, Dec 26 '19 at 16:09
@plochie - Thanks for pointing out mistakes. I will try to avoid it. — ArrchanaMohan, Dec 26 '19 at 16:14

score 2 · Answer 1 · answered Dec 26 '19 at 16:28

A simple click event will do the trick

<label class="radio-inline">
      <input type="radio" name="optradio" checked id="place_Oreder" (click)="onClick('order')">Order
</label>
<label class="radio-inline">
      <input type="radio" name="optradio" id="add_cart" (click)="onClick('cart')">Cart
</label>

comp.ts

onClick(item) {
    if(item == 'order')
       this.isSelectedOrder = true;
    else if(item == 'cart')
       this.isSelectedCart = true;
}

score 1 · Accepted Answer · answered Dec 26 '19 at 15:59

1

You can use ngForm for this, pass ref to function and from component, get the values as required.

Demo (Check console.)

HTML

<div class="container">
    <form #myForm="ngForm" (submit)="submitForm(myForm)">
        <label class="radio-inline">
        <input ngModel type="radio" name="optradio" checked value="true" id="place_Oreder">Order
      </label>
        <label class="radio-inline">
        <input ngModel type="radio" name="optradio" value="false">Cart
      </label>
        <button type="submit">Submit</button>
    </form>
</div>

Component

submitForm(form: NgForm) {
    console.log(form.value);
  }

answered Dec 26 '19 at 15:59

Plochie

3,944
1
17
33

Do I need to import any module on the above code in module file? – ArrchanaMohan Dec 26 '19 at 16:00
1

Just `import { FormsModule } from '@angular/forms';` is required. Check demo. – Plochie Dec 26 '19 at 16:01
Is it possible to get the value without creating submit button. It looks like the value is triggered after clicking submit button – ArrchanaMohan Dec 26 '19 at 16:18
I just want to get that value as soon as its clicked the radio button. – ArrchanaMohan Dec 26 '19 at 16:18
Can you please help me on this? I can't introduce any submit button in the existing page. I just wanna get the value based on radio button selection and invoke an appropriate Client. – ArrchanaMohan Dec 26 '19 at 16:20
1

In such scenario you dont need form then, just `(click)` function can work. https://stackblitz.com/edit/angular-ujcqss?file=src%2Fapp%2Fapp.component.html – Plochie Dec 26 '19 at 16:29

How to get the boolean value based on radio button selected in html using angular

2 Answers2