Angular 5 Reactive Forms - Radio Button Group

Question

I have 2 radio buttons  I m using reactive forms and I have added the form controls within my component  The issue I am facing is that the name attribute has to be the same as the formControlName  When I set the name attribute as the same  I can only select 1 radio button -- can never unselect and select the other one  Only allows me to select the same one   this genderControl   new FormControl     Validators required     and then added to my Form Group  genderControl  this genderControl    My HTML    lt div class  radio-inline  gt     lt input id  gender  type  radio  name  genderControl  formControlName  genderControl    gt     lt label class  radio-label  gt  Male lt  label gt     lt input id  gender  type  radio  name  genderControl  formControlName  genderControl    gt     lt label class  radio-label  gt Female lt  label gt   lt  div gt    Form Group      this personalInfo   new FormGroup     searchControl  this searchControl    titleControl  this titleControl    firstNameControl  this firstNameControl    middleNameControl  this middleNameControl    lastNameControl  this lastNameControl    birthdayControl  this birthdayControl    genderControl  this genderControl    phoneControl  this phoneControl    taxCanadaControl  this taxCanadaControl    provinceControl  this provinceControl    countryControl  this countryControl    taxCountryControl  this taxCountryControl     creditControl  this creditControl

User · Answer

IF you want to derive usg Boolean true False need to add  quot    quot  around value  lt form  formGroup   quot form quot  gt     lt input type  quot radio quot   value  true formControlName  quot gender quot   gt Male    lt input type  quot radio quot   value  false formControlName  quot gender quot  gt Female  lt  form gt

User · Answer

I tried your code  you didn t assign bind a value to your formControlName  In HTML file   lt form  formGroup   quot form quot  gt      lt label gt        lt input type  quot radio quot  value  quot Male quot  formControlName  quot gender quot  gt          lt span gt male lt  span gt      lt  label gt      lt label gt        lt input type  quot radio quot  value  quot Female quot  formControlName  quot gender quot  gt          lt span gt female lt  span gt      lt  label gt   lt  form gt   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   quot form quot  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   lt form  formGroup   quot form quot  gt     lt input type  quot radio quot  value  Male  formControlName  quot gender quot   gt Male    lt input type  quot radio quot  value  Female  formControlName  quot gender quot  gt Female  lt  form gt    Hope it helps

[angular] Angular 5 Reactive Forms - Radio Button Group

Examples related to angular

Examples related to angular5

Examples related to angular-reactive-forms