如何解读Angular 5.2中FormBuilder.group的方法签名？

先贴出方法签名：

(method) FormBuilder.group(controlsConfig: {
[key: string]: any; }, extra?: {
[key: string]: any; } | null): FormGroup

你的理解完全正确，下面详细拆解这个签名的每个部分：

• 必填参数 controlsConfig：类型为键是字符串、值为任意类型的对象。这里的字符串键对应表单里各个控件的名称，值可以是FormControl/FormGroup/FormArray实例，也可以是用于初始化控件的配置（比如['初始值', 验证器]这样的数组）。
• 可选参数 extra：由?标记为可选，类型支持两种情况——要么是键为字符串、值为任意类型的对象，要么是null。这个参数主要用来传递表单组的额外配置，比如全局验证器、异步验证器等。
• 返回值：方法执行后会返回一个FormGroup实例，也就是你构建好的表单组对象。

举个实际使用的例子更直观：

// 导入依赖
import { FormBuilder, Validators } from '@angular/forms';

// 在组件中使用
constructor(private formBuilder: FormBuilder) {}

buildUserForm() {
  const userForm = this.formBuilder.group({
    // controlsConfig：配置各表单控件
    username: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]],
    address: this.formBuilder.group({
      street: [''],
      city: ['']
    })
  }, {
    // extra：配置表单组全局验证器
    validators: [this.validateUsernameFormat]
  });
}

// 自定义全局验证器
validateUsernameFormat(group: FormGroup) {
  const username = group.get('username')?.value;
  return username && username.length < 3 ? { invalidUsername: true } : null;
}

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