Как динамически определить имя formControl в цикле ngFor? - PullRequest
0 голосов
/ 16 мая 2018

Я хотел бы динамически заполнять поля на основе элементов, содержащихся в объекте. Я использую реактивные формы с угловым материалом.

Однако я получаю:

Ошибка: не удается найти элемент управления с неопределенным атрибутом имени

<div *ngFor="let field of guidelines.fields; let i=index">
  <mat-form-field>
    <input [formControl]="i" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
  </mat-form-field>
</div>

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Использование группы форм:

HTML

<div [formGroup]="form" class="edit-guidelines">
  <div mat-dialog-content>
    <h2>Edit Guidelines</h2>
    <h3>{{guidelines.tab_name}}</h3>
    <div *ngFor="let field of guidelines.fields; let i=index">
      <mat-form-field>
        <input [formControlName]="field.field_name" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
      </mat-form-field>
    </div>
  </div>
  <div mat-dialog-actions>
    <span class="right-align-next-element"></span>
    <button class="secondary-btn" mat-button (click)="closeModal()">Cancel</button>
    <button class="primary-btn" mat-button (click)="updateGuideline()" cdkFocusInitial>Update Manufacturer</button>
  </div>
</div>

TS

getGuideline() {
    this.guidelines = this.data.tabObj[0];
    console.log(this.guidelines);
    this.form = this.createGroup();
  }

  createGroup() {
    const group = this.fb.group({});
    this.guidelines.fields.forEach(control => group.addControl(control.field_name, this.fb.control('')));
    return group;
  }
0 голосов
/ 16 мая 2018

Директива [formControl] принимает FormControl в качестве значения, и вы передаете ему число, следовательно, Не удается найти элемент управления с неопределенным атрибутом имени . Для доступа к formControls по индексу у меня будет либо массив-обертка, либо отдельный массив:

const wrappingArray = guidelines.fields.map(field => ({formControl, ...field}));

И используйте это

<div *ngFor="let field of wrappingArray; let i=index">
  <mat-form-field>
    <input [formControl]="field.formControl" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
  </mat-form-field>
</div>

Или с отдельным массивом

const formControls = [formControl1, ... formControlN];

И используйте это

<div *ngFor="let field of guidelines.fields; let i=index">
  <mat-form-field>
    <input [formControl]="formControls[i]" ngDefaultControl matInput placeholder={{field.field_name}} value={{field.notes}}>
  </mat-form-field>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...