Angular2 ReactiveFormsControl: how to bind radio buttons?

Question

I'm using ReactiveFormsModule of Angular2 to create a component that contains a form. Here is my code:

foo.component.ts

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'name': ['', Validators.required],
        'surname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html

<div class="two fields">
    <div class="four wide field">
        <label>Name*</label>
        <input type="text" [formControl]="myForm.controls.name"/>
    </div>

    <div class="four wide field">
        <label>Surname*</label>
        <input type="text" [formControl]="myForm.controls.surname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

The code i posted above doesn't work: if i click on one of the two radio buttons it always select the second one and i can't change it.

What is the right way to use FormControl with radio (or checkbox)?

Fırat Küçük · Accepted Answer · 2017-04-04 17:58:49Z

For other than string values you may use [value] attribute and also [checked] attribute should be used for initial values.

export enum Gender {
  FEMALE = 1,
  MALE   = 2
}

export class SampleGenderComponent implements OnInit {

  public form: FormGroup;
  public Gender = Gender;

  constructor(fb: FormBuilder) {

    this.form = fb.group({
      gender    : [
        Gender.FEMALE,
        []
      ]
    });
  }
}

<div class="inline fields">
  <label for="gender">Gender</label>
  <div class="field">
    <div class="ui radio checkbox">
      <input type="radio" name="gender" [value]="Gender.MALE" [checked]="form.controls['gender'].value === Gender.MALE">
      <label>Male</label>
    </div>
  </div>
  <div class="field">
    <div class="ui radio checkbox">
      <input type="radio" name="gender" [value]="Gender.FEMALE" [checked]="form.controls['gender'].value === Gender.FEMALE">
      <label>Female</label>
    </div>
  </div>
</div>

smartmouse · Accepted Answer · 2016-10-21 08:01:01Z

I solved adding value property with related values to the radio elements:

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" value="male" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" value="female" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

This make it working with both [formControl] and formControlName. (Thanks to @JsIsAwesome)

Bazinga · Accepted Answer · 2016-10-20 16:05:37Z

0

Change the formControl to formControlName and set the control name. And don't forget in your form tag to set [formGroup]="myForm".

This is working fine:

<form novalidate [formGroup]="myForm">
    <input type="radio" value="male" formControlName="gender" name="gender">
    <input type="radio" value="female" formControlName="gender" name="gender">
</form>

this.myForm= this.fb.group({
  gender: [""]
});

answered Oct 20, 2016 at 16:05

Bazinga

11.3k7 gold badges42 silver badges66 bronze badges

1 Comment

smartmouse Over a year ago

This works, but the reason is not the fact that you are using formControlName instead of formControl. Thank you anyway for your reply, you make me to figure out what was the problem (see my own answer).

Collectives™ on Stack Overflow

Angular2 ReactiveFormsControl: how to bind radio buttons?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related