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

Can you post how did you instantiate your `form` by FormBuilder and also your html file ? — Haifeng Zhang, Mar 02 '18 at 22:27
Possible duplicate of [Radio button in formArray](https://stackoverflow.com/questions/38852522/radio-button-in-formarray) — masterfloda, Mar 02 '18 at 22:46

score 152 · Accepted Answer · edited Dec 26 '22 at 06:40

152

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>

edited Dec 26 '22 at 06:40

starball

20,030
7
43
238

answered Mar 02 '18 at 22:36

Haifeng Zhang

30,077
19
81
125

Hitting this also did you get a solution ? – Kravitz Apr 29 '19 at 08:35
6

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. – Dale Harris Sep 30 '19 at 15:50
for me it did not work without name attribute of the radio buttons – adnan2nd Apr 02 '20 at 20:04
1

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 – Santosh Jun 20 '20 at 04:49
1

@Santosh ```...gender: ['Male', Validators.required] ``` should mark Male as default, i.e checked – Janatbek Orozaly Mar 10 '21 at 21:15
Can you post whole working code somewhere? – rofrol Jul 13 '21 at 12:22

score 24 · Answer 2 · edited Sep 28 '21 at 07:11

24

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>

edited Sep 28 '21 at 07:11

metodribic

1,561
17
27

answered Oct 15 '20 at 04:50

Taran

2,895
25
22

2

double quotes around the `true` and `false` values: `[value]="true"` – Ani Naslyan Jan 27 '21 at 14:30
Thank you! That was driving me nuts. – user3284953 Oct 06 '22 at 21:30

score 0 · Answer 3 · answered Jun 27 '23 at 04:59

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

Angular 5 Reactive Forms - Radio Button Group

3 Answers3

Linked