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:

<div class="radio-inline">
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label"> Male</label>
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label">Female</label>
</div>

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
});

Vivi

Can you post how did you instantiate your form by FormBuilder and also your html file ? – Spectral

Updated, I used FormGroup – Vivi

Do you really need name attribute? – Adaadabel

Possible duplicate of Radio button in formArray – Pot

Just leave out the name attribute. – Pot

Answer 1

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>

Spectral

Hitting this also did you get a solution ? – Effluent

I recommend still including the name attribute on the radio buttons, even though Angular doesn't need them.This is because radio buttons behave differently in the browser depending on whether they have a name to group them. Specifically, the behavior when tabbing into and out of radio groups is affected. This also prevents weird side-effects when you have multiple radio groups. – Depreciable

for me it did not work without name attribute of the radio buttons – Coquette

how can I mark the default active for the first one [checked]='true' not seems working to me. Do I need to define some form control for it ? any idea how can I do that – Elo

@Elo ...gender: ['Male', Validators.required] should mark Male as default, i.e checked – Fahrenheit

Can you post whole working code somewhere? – Courtland

Answer 2

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>

Camise

double quotes around the true and false values: [value]="true" – Diesis

Thank you! That was driving me nuts. – Aletheaalethia

Answer 3

Angular 16:

In HTML file:

<form action="POST" [formGroup]="registerForm" (submit)="processRegister()">
  <h1>Register</h1>
  <div>
    <label for="">Gender</label>
    <div>
      <input type="radio" id="male" name="gender" value="male" formControlName="gender">
      <label for="male">male</label>
      <input type="radio" id="female" name="gender" value="female" formControlName="gender">
      <label for="female">female</label>
    </div>
  </div>
  <button type="submit" >
    Submit
  </button>
</form>

In Ts file:

export class RegisterComponent {
  registerForm = this.builder.group({
    gender: this.builder.control('male')
  })

  constructor(private builder: FormBuilder, private toastr: ToastrService, private service: AuthService, private router: Router){

  }

  processRegister() {
    console.log("value form register: ", this.registerForm.value)
    if(this.registerForm.valid) {
      this.service.processRegiter(this.registerForm.value).subscribe((res) => {
        this.toastr.success("Please contact admin for enable access", "Register success")
        this.router.navigate(["login"])
      })
    }else{
      this.toastr.warning('Please enter valid data');
    }
  }
}

Dielu