Как я могу получить управляющее имя динамического углового поля?

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

Шаблон templateType в HTML имеет экземпляр 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