Angular 2 Form "Cannot find control with path"

Question

I try to make a dynamic form (so you can limitless add items to a list), but somehow the content of my list is not getting send because it can't find the control with path:

Cannot find control with path: 'list_items -> list_item'

My component:

@Component({   selector: 'app-list',   templateUrl: './list.component.html',   styleUrls: ['./list.component.css'] }) export class ListComponent implements OnInit {    listForm: FormGroup;    constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,                 private listService: ListService) {      this.listForm = this.fb.group({       title: ['', [Validators.required, Validators.minLength(5)]],       list_items: this.fb.array([         this.initListItem(),         ])     });   }     initListItem() {     return this.fb.group({       list_item: ['']     });   }   initListItemType() {     return this.fb.group({       list_item_type: ['']     });   }    addListItem() {     const control = <FormArray>this.listForm.controls['list_items'];     control.push(this.initListItem());   } 

The Template (list.component.html):

<h2>Add List </h2>  <form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">   <div class="form-group">     <input type="text" class="form-control" formControlName="title" placeholder="Title">   </div>    <div formArrayName="list_items">     <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">       {{i + 1}}.) <input type="text" formControlName="list_item" placeholder="List Item" class="form-control">     </div>     <a (click)="addListItem()">Add List Item +</a>    </div>    <button type="submit">Submit</button> </form> 

The title works just fine, but I can't find the error I have with the "formControlName", which is causing the error.

Thanks in advance for any help in this issue.

Update with what I changed list.component.html

<h2>Add List </h2>  <form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">   <div class="form-group">     <input type="text" class="form-control" formControlName="title" placeholder="Title">   </div>    <div formArrayName="list_items">     <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">       {{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control">     </div>     <a (click)="addListItem()">Add List Item +</a>    </div>    <button type="submit">Submit</button> </form> 

And in my component I changed the constructor and my addListItem method:

listForm: FormGroup;    constructor(private nodeService: NodeService, private messageService: MessageService, private fb: FormBuilder,                 private listService: ListService) {      this.listForm = this.fb.group({       title: ['', [Validators.required, Validators.minLength(5)]],       list_items: this.fb.array([           [''],         ])     });   }    addListItem() {     const control = <FormArray>this.listForm.controls['list_items'];     control.push(this.fb.control(['']));     console.log(control)   } 

Answer 1

There should be a formControlName in your HTML form mapped to your component file.

<div *ngFor="let list_item of [0,1,2]; let i=index" class="panel panel-default">   {{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control"> </div> 

list_items: this.fb.array([     [''], //0 points to this     [''], //1 points to this     [''] //2 points to this ]) 

Answer 2

Note that if your FormArray contains other FormGroup controls (which contain other instances of FormControl), you'll need to do this to access the controls inside each FormGroup:

        <div *ngFor="let item of myFormArray.controls; let i=index">             <div formGroupName="{{i}}">                 <input formControlName="myFormGroupSubControl1" />                 <input formControlName="myFormGroupSubControl2" />