Question

我有一个动态的formGroup，其中有时有单选按钮，有时有复选框，有时还有复选框（取决于后端响应）。

具有：

   this.choiceForm = new FormGroup({
    selectedChoice: new FormControl('0', Validators.required),
    checkedBoxes: new FormControl(null, Validators.requiredTrue)
  });

如果在DOM上找不到INVALID（单选按钮）或selectedChoice（复选框），则表单组返回checkedBoxes状态。

有没有办法解决这个问题？

Answer 1

一种更好的方法是仅在根据后端的响应确认需要哪种表单控件之后才创建表单。

可以在https://angular.io/guide/dynamic-form找到一个很好的例子。

// in controller

// get form data from backend
constructor(private service: MyService) {
    this.service.getForm().subscribe((response: any) => {
        if (response.data) {
            this.myForm = this.createForm(response.data);
        }
    })
}

// considering your data has following schema
[
    {
        key: 'key1'
        type: 'select'
        value: 'default' 
    },
    {
        key: 'key2'
        type: 'checkbox'
        value: true 
    }
]

createForm(data) {
    let group: any = {};

    data.forEach(item => {
        group[item.key] = new FormControl(item.value || '')
    })

    return new FormGroup(group);
}

如果DOM上不存在FormControl，则Angular 4+ FormGroup返回INVALID

1 个答案: