javascript - 如何获取动态 Angular 字段的控件名称？

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