Angular动态表单组：表单输入未绑定至表单组问题排查

你的代码存在两个核心问题，导致表单控件无法和FormGroup正确绑定：

1. 未导入响应式表单模块 #

Angular的响应式表单指令（如formGroup、formControlName）需要依赖ReactiveFormsModule才能生效，你当前只导入了CommonModule，缺少这个关键模块。

2. 模板未关联FormGroup实例 #

模板中的输入控件没有归属到对应的FormGroup下，必须在包含这些控件的父容器上添加[formGroup]="form"属性，才能让formControlName找到对应的FormControl。

修正后的完整代码 #

import 'zone.js/dist/zone';
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule], // 新增ReactiveFormsModule
  template: `
    <h1>Hello from {{name}}!</h1>
    <div [formGroup]="form"> <!-- 新增formGroup绑定 -->
      <div class="col-5 form-floating">
        <input formControlName="one"/>
        <label>One</label>
      </div>
      <!-- 可以根据array动态渲染其他字段，比如： -->
      <div *ngFor="let field of array" class="col-5 form-floating mt-2">
        <input [formControlName]="field"/>
        <label>{{field | titlecase}}</label>
      </div>
    </div>
    <button (click)="submit()" class="mt-3">SUBMIT</button>
  `,
})
export class App implements OnInit {
  name = 'Angular';
  array = ['one', 'two', 'three'];
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({});
    this.createForm();
  }

  createForm(): void {
    this.array.forEach((field: string) => {
      this.form.addControl(field, new FormControl(null));
    });

    this.form.valueChanges.subscribe((x) => {
      console.log(x);
    });
  }

  submit(): void {
    console.log(this.form.value);
  }
}

bootstrapApplication(App);

修正后的效果 #

• 修改输入框内容时，valueChanges会正常打印最新的表单值
• 提交表单时，能获取到所有已修改字段的真实值，不再是全null的状态
• 你可以通过*ngFor循环array数组，动态渲染所有指定的表单字段，无需手动逐个编写

内容的提问来源于stack exchange，提问作者Mush-A