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

Question

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

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

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

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 是一个 class 我已经在别处定义并导入到组件中，它公开了一些自定义“验证器对象”，每个对象都包含对要在期间调用的函数的引用验证（除其他事项外），因此，为了访问要传递给 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() 可以像这样使用带有验证器或禁用 [=18=] 的对象：

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

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

What kind of object should I pass to `FormBuilder.group()` in order to have fields correctly instantiated?

typescript

angular

angular-reactive-forms