能否先声明空FormGroup再在ngOnInit中添加表单控件？

你遇到的问题是因为FormGroup的构造函数要求传入一个控件对象（类型为{[key: string]: AbstractControl}），直接传null或者空参数不符合类型要求，所以无法正常初始化。正确的实现方式如下：

1. 初始化空的FormGroup #

先传入一个空对象来创建空的FormGroup：

this.demoForm = new FormGroup({});

2. 动态添加表单控件 #

使用addControl方法逐个添加控件，方法接收两个参数：控件名称和对应的FormControl实例：

// 添加带校验规则的用户名控件
this.demoForm.addControl('username', new FormControl('', [Validators.required, Validators.minLength(3)]));

// 添加邮箱控件
this.demoForm.addControl('email', new FormControl('', [Validators.required, Validators.email]));

完整示例代码 #

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {
  demoForm: FormGroup;

  ngOnInit(): void {
    // 初始化空FormGroup
    this.demoForm = new FormGroup({});

    // 动态添加控件
    this.demoForm.addControl('username', new FormControl('', [Validators.required, Validators.minLength(3)]));
    this.demoForm.addControl('email', new FormControl('', [Validators.required, Validators.email]));
    this.demoForm.addControl('password', new FormControl('', [Validators.required, Validators.minLength(6)]));
  }
}

额外技巧：替换已有控件 #

如果需要替换已存在的控件，可以使用setControl方法：

// 替换username控件为带有默认值的新控件
this.demoForm.setControl('username', new FormControl('defaultName'));

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