Angular2/4 - Reactive forms and radio buttons: How to check one by default

Question

Please see this code snippet from the docs:

When using radio buttons in a reactive form, ...

import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <input type="radio" formControlName="food" value="beef" > Beef
      <input type="radio" formControlName="food" value="lamb"> Lamb
      <input type="radio" formControlName="food" value="fish"> Fish
    </form>

    <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
  `,
})
export class ReactiveRadioButtonComp {
  form = new FormGroup({
    food: new FormControl('lamb'),
  });
}

My question: What should I do to make one of those radio buttons checked by default? Do I need to add some additional property to the FormControl? Or should I modify something in the template?

(I tried adding a checked attribute to one of them in the template, but for some reason it doesn't do anything. I looked at it in the browser using "Inspect element", and the attribute is there in the DOM, yet it has no effect on the state of the radio button. It doesn't become checked.)

Z. Bagley · Accepted Answer · 2017-09-27 19:08:50Z

3

+50

I believe the only problem you have is that you're not using ReactiveFormsModule. With your current setup you have already selected lamb and it shows selected when using ReactiveFormsModule.

In your module you'll want to import this:

import { ReactiveFormsModule }   from '@angular/forms';

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})

Here is a working plunker.

answered Sep 27, 2017 at 19:08

Z. Bagley

9,2681 gold badge44 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tom Over a year ago

Ahh, thank you for pointing out that lamb is already selected! I missed that point that it's actually the FormControl's value that makes the selection. In its value the value of that radio button should be specified which should be selected by default from the group. Now I get it and it works as expected.

tom Over a year ago

...btw I had ReactiveFormsModule imported. It was just the value thing I was not doing right.

Rebar · Accepted Answer · 2017-09-26 04:07:04Z

1

For every option there is a selected attribute you can set if you want that option as default. you can write:

<option selected></option>

or:

<option selected="selected"></option>

and change that value for example in javascript with the YourOptionTag.selected method.

hope it helps

answered Sep 26, 2017 at 4:07

Rebar

1,11512 silver badges19 bronze badges

3 Comments

tom Over a year ago

selected is an attribute for drop-down lists. With <input type="radio"> (and <input type="checkbox">) one should use the checked attribute. My problem is that even if I set the checked attribute for one of my radio buttons in the group (radio buttons with the same name) in the template, it doesn't have any effect, all of them stay unchecked.

Rebar Over a year ago

ah ok, i can imagine what you're trying to load. do you try to fill your select from an array with string interpolation? if yes, the string have to fit, to set the default one. i will post you my code at night. i did it in angular 4

tom Over a year ago

I updated my question. My form is model-driven. It has a FormGroup, and to each field belongs a FormControl. ...And some additional attributes like placeholder, rows min, max, etc. are being added to the inputs in the template files. (This is how I'm adding the checked attribute too, which doesn't work unfortunately.)

Collectives™ on Stack Overflow

Angular2/4 - Reactive forms and radio buttons: How to check one by default

2 Answers 2

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Related