Radio button is not getting checked in angular 2

Question

I have created two radio button for gender, I want to display radio button checked that was previously selected.

I have added below code in Template

<div class="form-group">
    <label>Gender</label>

    <div id="input-type">
        <label class="radio-inline">
            <input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
        </label>
        <label class="radio-inline">
              <input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
        </label>
    </div>
</div>

I have added below code in Component.

console.log(this.gender);  // I am getting 'male' here.
this.editProfile = new FormGroup({
     gender: new FormControl(this.gender || null)
});

Other value of the form is getting displayed but radio button is not getting checked.

Answer 1

You can write it like

  <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">

    <label class="radio-inline">
            <input type="radio" formControlName="gender" [name]="'gender'" [value]="'male'"/> Male
        </label>
        <label class="radio-inline">
              <input type="radio" formControlName="gender" [name]="'gender'" [value]="'female'"/> Female
        </label>
     <button type="submit" [disabled]="form.invalid">Submit</button>

    {{form.value|json}}
  </form>

It should work for you

Find a PLUNK here

Answer 2

I have found other solution. We can use below code

<div class="form-group">
    <label>Gender</label>
      <div id="input-type">
          <label class="radio-inline">
              <input type="radio" [checked]="editProfile.value.gender == 'male'" formControlName="gender" value="male"/> Male
          </label>
          <label class="radio-inline">
                <input type="radio" [checked]="editProfile.value.gender == 'female'" formControlName="gender" value="female"/> Female
          </label>
      </div>
</div>

Answer 3

As you are using Reactive Forms you can omit name attribute on input and because you are setting string value to input so you have to use value="male" instead of [value]="'male'".

<div class="form-group">
  <label>Gender</label>

  <div id="input-type">
    <label class="radio-inline">
        <input type="radio" formControlName="gender" value="male"/> Male
    </label>
    <label class="radio-inline">
          <input type="radio" formControlName="gender" value="female"/> Female
    </label>
  </div>
</div>