Angular2 - Reactive forms radio button value as object

Question

I have a set of radio buttons on my component that are simple yes and no values. It uses text as the label and an id for its value.

I am trying to assign an object as its value so that when I submit my form, I can get access to both the value and text.

Here is what I have tried:

<label class="radio-inline">
  <input type="radio" formControlName="changeType" ng-value="{value:0, text:'No'}"> No
</label>
<label class="radio-inline">
      <input type="radio" formControlName="changeType" ng-value="{value:1, text:'Yes'}"> Yes
</label>

When I try this, it fails my reactiveForms validation as being a required field. How can I assign this object where the validation will pass when one of them is selected?

@Kai - My value comes through as such when using value submitting the form: changeType:"{value:2, text:'Yes'}" <- treats it as a string — SBB
– SBB, Commented Jul 14, 2017 at 1:04
@ThinkingMedia - Can't bind to 'ngValue' since it isn't a known property of 'input'. — SBB
– SBB, Commented Jul 14, 2017 at 1:29
Oh you can't use ngValue on input. Sorry. You're using reactive forms so the value is stored in the form control for "changeType" — Reactgular
– Reactgular, Commented Jul 14, 2017 at 1:33

Nehal · Accepted Answer · 2017-07-14 02:35:09Z

1

Since I can't see the component code, not really sure about the form part. But I was able to get object value from radio button selection using just value.

UPDATE: Since object needs to be passed, it's better to create them in the component and use [value] to bind the objects and pass them to the form. I have added couple of extra lines in html to show value and text are accessible.

<form class="example-form" (ngSubmit)="submit(addForm.value)" [formGroup]="addForm">
  <label class="radio-inline">
    <input type="radio" formControlName="changeType" [value]="radioItems0"> No
  </label>
  <label class="radio-inline">
        <input type="radio" formControlName="changeType" [value]="radioItems1"> Yes
  </label>
  <p></p>
   <button md-raised-button  type="submit">Submit</button>
</form>

<p>Form values:</p> 
<p>{{ addForm.value | json }}</p>

<p>Selected value: {{ addForm.value.changeType.value }}</p>
<p>Selected text: {{ addForm.value.changeType.text }}</p>

component.ts:

export class InputFormExample {

  radioItems0 = { value: "0", text: "No"}
  radioItems1 = { value: "1", text: "Yes"}

  addForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.addForm = this.fb.group({
      changeType: {}
    });
  }

  submit(form){
    alert(JSON.stringify(form));
  }
}

demo

Hope this resolves your problem :)

edited Jul 14, 2017 at 2:35

answered Jul 14, 2017 at 2:09

Nehal

13.3k4 gold badges48 silver badges59 bronze badges

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

4 Comments

SBB Over a year ago

hmm, It looks like the value is a string though? For example, I can't do form.changeType.text to access the text value of the object.

Nehal Over a year ago

I see what you mean. Will get back to you :)

SBB Over a year ago

One quick question - Can I still add validators to this input? I originally had changeType: ['', Validators.required], but not too sure how to do it with your example using an object.

Nehal Over a year ago

You can still do the same, changeType: [{}, Validators.required], make sure you have imported Validators, import {Validators} from '@angular/forms';. I have added that to the demo.

Prathmesh Dali · Accepted Answer · 2017-07-14 02:11:23Z

0

ng-value will not work on input element. Try to use change event as

<input type="radio" formControlName="changeType" (change)="radioButtonSelect($event) value=0>No

And in event handler

radioButtonSelect(event){ var text=event.target.value?'No':'Yes'; this.selectedType={value:event.target.value, text:text}; }

answered Jul 14, 2017 at 2:11

Prathmesh Dali

2,3601 gold badge20 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular2 - Reactive forms radio button value as object

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related