Angular2- Object as Radio Input Value

Question

Is it possible to bind a JSON object to a radio input in Angular2?

I have a JSON object named object and I tried

<input type="radio" [(ngModel)]="selectedObject" [ngValue]="object">

but it gives ngValue is not a known property of input error. I also tried

<input type="radio" [(ngModel)]="selectedObject" value="{{object}}">

But then selectedObject becomes [object Object].

@Kapein Values are just strings in this example, I want to bind JSON objects to the value. — Bünyamin Sarıgül
– Bünyamin Sarıgül, Commented Nov 10, 2016 at 10:26
Any luck finding an answer here? I, too, am stuck with this one... — mikesir87
– mikesir87, Commented Nov 25, 2016 at 17:05

Jon · Accepted Answer · 2017-12-12 18:37:52Z

1

Thanks to this post, we have an answer:
Use [value]

<label *ngFor="let item of items">
    <input type="radio" formControlName="options" [value]="item">
    {{item}}
</label>

Thanks to Colleen Purcell

answered Dec 12, 2017 at 18:37

Jon

7,9181 gold badge44 silver badges42 bronze badges

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

Comments

Kapein · Accepted Answer · 2016-11-10 10:31:09Z

0

I wrote this code in Angular 1, without testing converted to angular 2 for you

<span *ngFor="let List in object.Lists">
    <input type="radio" name="{{List.ID}}" value="{{List.Value}}">
</span>

answered Nov 10, 2016 at 10:31

Kapein

18513 bronze badges

3 Comments

Bünyamin Sarıgül Over a year ago

I don't want the value to be object.attribute, I want it to be the object itself.

Kapein Over a year ago

and what do you think about using indexes and then OnChange(index), then you look up which index in the array you want and copy it? Not sure if that works with [(ngModel)], not an Angular 2 expert

Bünyamin Sarıgül Over a year ago

If I use onChange, the model is updated when I select the button but it doesn't be selected when the model is changed externally (not two way binding).

Collectives™ on Stack Overflow

Angular2- Object as Radio Input Value

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related