Angular how to default set radio buttons, Reactive forms

Question

Implementing a reactive form in Angular with radio buttons. I want to set a default value, I have tried the following:

Template:

<form [formGroup]="form" (ngSubmit)="onSubmit(form)" class="actionsForm">

    <input type="radio" id="entertainCrowdSkill1" [value]="skillsForBackend[0]"
    class="radiobuttons" formControlName="skill" [checked]="true">

    <input type="radio" id="entertainCrowdSkill2" [value]="skillsForBackend[1]" 
    class="radiobuttons" formControlName="skill">

</form>

Model:

  ngOnInit() {
    this.form = this.fb.group({
      skill: ['', Validators.required],
    });

  }

  onSubmit(form) {
    console.log(form.controls.skill.value) // logs empty string
}

The button appears to be checked even the CSS:checked class is applied. However, when I try to log the value of skill it is an empty string (the default value entered in the fb). I have seen an answer but this was for template driven forms.

How do I set a default value for the radio buttons in the template in a reactive form?

Felix Lemke · Accepted Answer · 2019-06-05T08:58:15.190

14

Assign the initial value with the FormBuilder group contructor instead of using [checked]. You assigned the value '', which is an empty string. To execute the onSubmit function add (ngSubmit)="onSubmit()" to the form tag.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input type="radio" formControlName="skill" [value]="skillsForBackend[0]">
  <input type="radio" formControlName="skill" [value]="skillsForBackend[1]">
</form>

In your typescript try the following.

ngOnInit() {
  this.form = this.fb.group({
    skill: [this.skillsForBackend[0], Validators.required]
  });
}

onSubmit() {
  console.log(this.form.value) // should show { skill: /* your data */ }
}

edited Jun 05 '19 at 08:58

answered May 23 '18 at 21:13

Felix Lemke

6,189
3
40
67

2

@WillemvanderVeen I'm not sure why you'd pass `form` or `form.value` to `onSubmit` though. It's basically already available within your component, accessible via `this.form`. – David Walschots May 23 '18 at 21:21
I think both solutions are ok, passing `form.value` or getting the values by `this.form...`. At least it's both working. – Felix Lemke May 23 '18 at 21:27
I do agree that passing form.value is unnecessary noise. Of course it works, but `this.form...` will do the same in the method itself. Less noise. :) – dudewad Jun 04 '19 at 22:31

score 0 · Answer 2 · answered Feb 03 '21 at 05:10

The below method worked for me.

First add value attribute in your html

<form [formGroup]="form" (ngSubmit)="onSubmit(form)" class="actionsForm">

    <input type="radio" id="entertainCrowdSkill1" [value]="skillsForBackend[0]"
    value="crowdSkill1"
    class="radiobuttons" formControlName="skill" [checked]="true">

    <input type="radio" id="entertainCrowdSkill2" [value]="skillsForBackend[1]" 
    value="crowdSkill2"
    class="radiobuttons" formControlName="skill">

</form>

And then modify your model as below.

ngOnInit() {
    this.form = this.fb.group({
      skill: ['crowdSkill1', Validators.required],
    });

  }

  onSubmit(form) {
    console.log(form.controls.skill.value) // logs empty string
}

Notice how the value of the value attribute added in html is also added as the initial value of the skill in form group.

Angular how to default set radio buttons, Reactive forms

Template:

Model:

2 Answers2