Angular动态表单单选按钮问题：选中值未同步到FormGroup实例

Hey there! Let’s tackle that radio button sync problem you’re facing in your Angular dynamic form. This is a super common gotcha when building dynamic forms with nested components, so let’s break down the key fixes step by step.

1. Ensure Radio Buttons Share the Same name Attribute #

Angular groups radio buttons by their name property—if each radio in the same set has a different name, Angular won’t recognize them as a single group, and the value won’t sync properly.

In your dynamic-form-question component’s template, make sure all radio buttons for a single question use the same name (tied to your question’s key):

<div *ngFor="let option of question.options">
  <input 
    type="radio"
    [name]="question.key" <!-- Critical: Same name for all radios in the group -->
    [formControlName]="question.key"
    [value]="option.value"
  >
  <label>{{ option.label }}</label>
</div>

2. Verify Your FormGroup Initialization #

Your toFormGroup method needs to properly initialize a FormControl for each question key. If the control is missing or initialized incorrectly, the radio value won’t bind.

Here’s a solid example of how to structure this method in your dynamic-form component:

toFormGroup(questions: any[]): FormGroup {
  const controls: { [key: string]: AbstractControl } = {};

  questions.forEach(question => {
    // Set a default value if needed, otherwise use null
    const initialValue = question.defaultValue ?? null;
    controls[question.key] = new FormControl(initialValue);
  });

  return new FormGroup(controls);
}

3. Correctly Bind the Radio Button value #

Double-check that you’re binding to the option’s actual value (not just the label). If you accidentally use option.label instead of option.value, you’ll sync the display text instead of the intended value.

4. Properly Pass the FormGroup to Child Components #

Your dynamic-form-question component needs access to the parent FormGroup to connect the radio buttons to the form controls.

First, pass the form group from the parent dynamic-form component:

<app-dynamic-form-question
  *ngFor="let question of questions"
  [question]="question"
  [formGroup]="formGroup" <!-- Pass the parent FormGroup -->
></app-dynamic-form-question>

Then, in the child component’s TypeScript, receive the input and wrap your radio buttons in a container that uses the form group:

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

@Component({
  selector: 'app-dynamic-form-question',
  templateUrl: './dynamic-form-question.component.html'
})
export class DynamicFormQuestionComponent {
  @Input() question: any;
  @Input() formGroup: FormGroup;
}

Child component template (wrap in [formGroup] context):

<div [formGroup]="formGroup">
  <div *ngFor="let option of question.options">
    <input 
      type="radio"
      [name]="question.key"
      formControlName="{{ question.key }}"
      [value]="option.value"
    >
    <label>{{ option.label }}</label>
  </div>
</div>

Quick Troubleshooting Tip #

If you’re still stuck, add a debug line in your parent component to log the form’s value on change:

this.formGroup.valueChanges.subscribe(value => {
  console.log('Form value:', value);
});

This will help you see if any values are updating, which can narrow down whether the issue is in the template binding or form initialization.

内容的提问来源于stack exchange，提问作者AlejoDev