为了正确实例化字段，我应该将哪种对象传递给“FormBuilder.group()”？

Question

虽然这当然是“错误的方法签名读取”的情况，但这不是建议问题的重复，因为这里问的是如何从头开始动态创建 FormGroup 对象，而不是如何附加控件到一个已经存在的FormGroup 对象

---

我正在尝试创建一个组件，该组件基于自定义输入对象动态呈现反应式表单，该对象定义要在表单中呈现的输入；

我还没有进入输入部分，目前我已经在组件的类本身中定义了一个示例输入对象：

interface FieldDefinition {
    id: string,
    label: string,
    type: string,
    validatorsList: any[]
}

fieldDefinitions: FieldDefinition[] = [
    { ... }
    {
        id: 'nome',
        label: 'Nome:',
        type: 'text',
        validatorsList: [
            CommonValidators.validatorsDef.fieldHasStdVarcharLength,
            CommonValidators.validatorsDef.fieldIsEmpty,
            CommonValidators.validatorsDef.nomeCognomeContainsInvalidCharacters
        ]
    },
    { ... }
}

CommonValidators 是我在 elswhere 定义的一个类，我导入到组件中，它公开了一些自定义的“验证器对象”，每个都包含对在验证期间调用的函数的引用（以及其他内容），所以，为了访问要传递给FormBuilder.group()的验证器函数的引用，可以这样做：CommonValidators.validatorsDef.fieldHasStdVarcharLength.funcRef。

现在对于我的生活，我不知道如何从这个开始实例化一个FormBuilder.group() 会接受的对象。

我认为FormBuilder.group() 方法会接受Map 元素作为参数，所以我尝试构建一个遍历fieldDefinitions 的地图：

constructor(private formBuilder: FormBuilder) {
    let formGroupMap = new Map();

    this.fieldDefinitions.forEach(elem => {
        formGroupMap.set(
            elem.id,
            new FormControl(
                '',
                elem.validatorsList.map(elem => {
                    return elem.funcRef;
                })
            )
        );
    })

    this.form = this.formBuilder.group(formGroupMap)

    console.log(formGroupMap)
    console.log(this.form)
}

当然这不起作用，所以我认为通过地图不是要走的路；

我应该将哪种对象传递给FormBuilder.group() 才能正确实例化字段？

当然我不需要确切的解决方案，只需要我实际应该传递的那种对象，所以我可以在我的构造函数中实例化它。

以下是一些控制台输出，显示了控件未实例化的方式以及我如何构建地图：

Answer 1

您可以使用像这样的简单对象通过 formbuilder.group() 创建表单：

    const formObj = {};
    this.fieldDefinitions.map(x => {   
      formObj[x.id] = {value: '', validators: x.validatorsList} 
    })
        
    this.form = this.formBuilder.group(formObj);

formbuilder.group() 可以使用带有验证器或禁用属性的对象，如下所示：

this.formBuilder.group({
   name: '',
   description: {value: null, disabled: false, validators: [Validators.required]}
   property: [null, [Validators.required]]
})