CODEWITHSUNDEEP
angularcheckboxradio-buttonangular2-formsangular2-formbuilder
smartmouse
smartmouse

Reputation: 14404

Angular2 ReactiveFormsControl: how to bind radio buttons?

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)?

Upvotes: 3

Views: 8193

Answers (3)

Fırat K&#252;&#231;&#252;k
Fırat K&#252;&#231;&#252;k

Reputation: 6003

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>

Upvotes: 5

smartmouse
smartmouse

Reputation: 14404

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)

Upvotes: 2

Bazinga
Bazinga

Reputation: 11214

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: [""]
});

Upvotes: 0

Related Questions