Question

我正在尝试将新控件动态推入formBuilder。

/* templatesTypes = ["string1", "string2", "string3","string4"] */
/* templates = [{templateType: "string1", ...}, {templateType: "string2"}, ...]*/

this.agency = this.fb.group({
  name: [],
  templates: this.fb.array([])
});

const arrayControl = this.agency.controls['templates'] as FormArray;
const objControl = {};
templatesTypes.forEach(templateType => {
  objControl[templateType] = [{
    value: templates.filter(template => template.templateType === templateType)
  }];
  arrayControl.push(this.fb.group(objControl));
});

<div formArrayName="templates" *ngFor="let templateType of agency.get('templates').controls; let i = index">
  <div [formGroupName]="i">
    <label>{{ templateType.name }}</label>
    <ng-select  
      [items]="agency.get('templates').controls[i]" 
      bindLabel="templateName" 
      formControlName="{{ templateType.name }}">
    </ng-select>
  </div>
</div>

控件名称是动态的，基于模板名称（“ string1”，“ string2”，...）。

但是我没有找到动态获取控件名称的任何方法。我尝试使用templateType.name，但没有任何回报。

Answer 1

HTML模板中的templateType的实例是AbstractControl，它没有name属性。

我认为这段代码应该可以正常工作。

<div formArrayName="templates" *ngFor="let templateType of agency.get('templates').controls; let i = index">
  <div [formGroupName]="i">
    <label>{{ templateType.name }}</label>
    <ng-select  
      [items]="agency.get('templates').controls[i]" 
      bindLabel="templateName" 
      formControlName="{{ templates[i].templateType }}">
    </ng-select>
  </div>
</div>

参考： -AbstractControl：https://angular.io/api/forms/AbstractControl

如何获得动态Angular字段的控件名称？

1 个答案: