Angular 8：基于组件在html中动态设置formControlName

Question

在数据库表中，我有“ key_name”，它已成功返回API并且运行良好。

我想做的是将这些字段值设置为html中的formControlName，在组件中，我正在使用反应形式，因此我尝试了formArrayName。

基于更改事件，我在formControl中推送新的categoryArray并将其键指定为db字段的值。

这是我的HTML：

<div class="col-md-6">
                            <div formArrayName="categoryArray" *ngFor="let type of types; let k = index">
                                <div [formGroupName]="k">
                                    <div class="form-group">
                                        <label>Select {{ type.cat_name }}</label>
                                        <select class="form-control custom-select" 
                                            (change)="onChangeType($event.target.value)"
                                            formControlName="{{ type.key_name }}" >
                                            <option value="">-- Select --</option>
                                            <option *ngFor="let type of types" [value]="type.category_id">
                                                {{type.cat_name}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

component.ts：

onChangeCategory(id) {
    if(id) {
      this.artistService.fetchTypeAndSubTypes(id).subscribe(res => {
        if (res.status == 200) {
          this.types = res.data

          this.addInNewCategory(this.types)

        }
      })
    } else {
      this.types = null
      this.subTypes = null
    }
  }

  get category(): FormArray {
    return <FormArray>this.uploadArtWorkForm.controls.categoryArray;
  }

  addInNewCategory(types) {
    let obj = {}

    types.forEach(element => {
      obj[element['key_name']] = [null, [Validators.required]]
    });

    console.log("obj", obj)
    this.category.push(
      this.formBuilder.group(obj)   
    );

  }

我要存档的是，基于第一类选择，所有第二级类别将显示为动态HTML下拉列表，并且其子类别列表在下拉列表中。

我得到的错误：

ERROR Error: Cannot find control with path: 'categoryArray -> 1'

ERROR Error: Cannot find control with path: 'categoryArray -> 1 -> metal'

提前感谢

Answer 1

尝试以下，

假设您是从formKeys对象中的键获取的>

let formObj={};
Object.keys(this.formKeys||[]).forEach(d=>{
 formObj[k]=["",Validators.required];
});

this.dynamicForm=this.fb.group(formObj);
使用html：

<form [formGroup]="dynamicForm">
<div *ngFor="let key of ArrayOfFormKey">
  <input [fromControlName]="key">
</div>
</form>