angular2 bind model value to radio button

Question

I have a model which takes boolean value: rational_thinker: boolean; I set it's value from my frontend through radio boxes as following:

<label #radio class="my-radio-label mdl-radio mdl-js-radio mdl-js-ripple-effect">
<input #btn1 type="radio" value='true' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn1.value)">
    <span class="mdl-radio__label">True</span>
</label>

<label #radio class="my-radio-label mdl-radio mdl-js-radio mdl-js-ripple-effect">
<input #btn2 type="radio" value='false' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn2.value)">
    <span class="mdl-radio__label">False</span>
</label>

and method that sets the value:

getRationalThinker(value){
    this.rational_thinker=value;
}

After initial save the value is stored to my backend, and when I retrieve it again I want the corresponding radio button to be pre-selected, right now it appears blank.

How can I achieve that?

UPDATE:

You are then managing to get the correct value with getRationalThinker(), send it to BE and when exactly are you having trouble initiating the radios buttons? Does the page reload? Do you go from one page to another? Is it an asyncronus call? — SrAxi
– SrAxi, Commented Jun 1, 2017 at 20:37
I get an object from my backend in ngOnInit which has rational_thinker=true (and couple of such similar boolean values) on any successive page load, all other fields are prepopulated but not radio buttons. I am updating my question with screenshot of what I am trying to say.. — Thinker
– Thinker, Commented Jun 1, 2017 at 20:43

SrAxi · Accepted Answer · 2017-06-01 21:04:24Z

4

I believe is a type issue:

value='true' [(ngModel)]='rational_thinker'

Here, the 'true' from the value is string type, while the true from your model is boolean type.

You could maybe solve this by:

In Component:

public rationalThinkerModel: boolean = true;

In Template:

<input #btn1 type="radio" value='rationalThinkerModel' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn1.value)">
    <span class="mdl-radio__label">True</span>
</label>

<input #btn2 type="radio" value='!rationalThinkerModel' [(ngModel)]='rational_thinker' name="rational_thinker" class="mdl-radio__button" (click)="getRationalThinker(btn2.value)">
    <span class="mdl-radio__label">False</span>
</label>

Update:

Try adding this instead:

[checked]="(rational_thinker === true) ? 'true' : 'false'"

edited Jun 1, 2017 at 21:04

answered Jun 1, 2017 at 20:50

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

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

7 Comments

Thinker Over a year ago

No it did not help :(

SrAxi Over a year ago

@Nitish Check my update and see if it fixes the issue.

SrAxi Over a year ago

@Nitish You sure you have FormsModule correctly included?

Thinker Over a year ago

[checked]="(rational_thinker === true) ? 'true' : 'false'" this worked. I was trying [checked]="rational_thinker === true"

SrAxi Over a year ago

Finally we managed to make it work! I'm glad! Also @CitizenNito deserves props! ;)

|

CitizenNito · Accepted Answer · 2017-06-01 21:09:23Z

4

Use [value]='true' and [value]='false'.

If you use the vanilla value='true' the contents of the property are not interpreted by angular but taken to be a string. This way, you have a string "true" which is not strictly equal to the boolean true (which I assume your model has from the server).

Using [value] instead makes angular interpret the contents as code, so if the contents are true or false, they will be taken as booleans and match with your model (hence become pre-selected correctly).

Edit: switched [ngValue] with [value] as [ngValue] seems to only work with select elements...

edited Jun 1, 2017 at 21:09

answered Jun 1, 2017 at 20:48

CitizenNito

3261 silver badge5 bronze badges

6 Comments

Thinker Over a year ago

for [ngValue]='true' it is giving me Can't bind to 'ngValue' since it isn't a known property of 'input' error

CitizenNito Over a year ago

Try [value]='true' - I thought these were equivalent but maybe ngValue has been deprecated or something (I use it in working production code, though).

Thinker Over a year ago

I tried that as well, but didn't help. I even tried [checked]="rational_thinker === true" but no help

SrAxi Over a year ago

I will give my +1 because our solutions should work! xD

Thinker Over a year ago

I am trying exactly same, but I am facing the same issue. Can it be related to DOM update?

|

Collectives™ on Stack Overflow

angular2 bind model value to radio button

2 Answers 2

7 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related