如何获取动态 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 但它 return 什么都没有。

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 字段的控件名称？

How can I get the control name of a dynamic Angular field?

javascript

typescript

angular

angular-formbuilder