How to dynamically define formControl name within ngFor loop?

Question

I would like to dynamically populate fields based on the items containing within an object. I'm using reactive forms with angular material.

However, I'm getting:

Error: Cannot find control with unspecified name attribute

<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>

Rahul Dagli · Accepted Answer · 2018-05-17 14:14:52Z

8

Using form group:

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;
  }

answered May 17, 2018 at 14:14

Rahul Dagli

4,53216 gold badges53 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gel Over a year ago

how do you add Validators.required or Validators.min etc and variations of Validators for specific form control? (dynamically like you have done here)

Ben Racicot Over a year ago

It should be noted that you will not see formControlName on the element when you loop em.

J. Pichardo · Accepted Answer · 2018-05-16 15:13:02Z

The [formControl] directive take a FormControl as value and you are passing it a number, hence the Cannot find control with unspecified name attribute. I would have either a wrapping array or a separate array in order to access the formControls by index:

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

And use it

<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>

Or with a separate array

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

And use it

<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>

Collectives™ on Stack Overflow

How to dynamically define formControl name within ngFor loop?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related