Angular 5 Reactive Forms - Radio Button Group

I tried your code, you didn't assign/bind a value to your formControlName.

In HTML file:

<form [formGroup]="form">   <label>     <input type="radio" value="Male" formControlName="gender">       <span>male</span>   </label>   <label>     <input type="radio" value="Female" formControlName="gender">       <span>female</span>   </label></form>

In the TS file:

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

Make sure you use Reactive form properly: [formGroup]="form" and you don't need the name attribute.

In my sample. words male and female in span tags are the values display along the radio button and Male and Female values are bind to formControlName

See the screenshot:

To make it shorter:

<form [formGroup]="form">  <input type="radio" value='Male' formControlName="gender" >Male  <input type="radio" value='Female' formControlName="gender">Female</form>

Hope it helps:)

IF you want to derive usg Boolean true False need to add "[]" around value

<form [formGroup]="form">  <input type="radio" [value]=true formControlName="gender" >Male  <input type="radio" [value]=false formControlName="gender">Female</form>