Angular 2 Form "Cannot find control with path"

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

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

A simple example with FormArray @ stackblitz (gist'd below)

app.component.ts

import { Component,OnInit } from '@angular/core';import { FormGroup, FormControl, FormArray, FormBuilder, Validators } from '@angular/forms';@Component({  selector: 'my-app',  templateUrl: './app.component.html',  styleUrls: [ './app.component.css' ]})export class AppComponent implements OnInit {  fg: FormGroup;  constructor(private fb: FormBuilder){}  ngOnInit() {  this.fg = this.fb.group({    address: this.fb.group({      street: ['', Validators.required],    }),    aliases: this.fb.array([])  });  const fa = (this.fg.get('aliases')as FormArray);  this.addNewAlias();  }  addNewAlias(){    const fa = (this.fg.get('aliases')as FormArray);    fa.push(this.fb.group({      name: ['', Validators.required]    }));  }  deleteAlias(i:number){    const fa = (this.fg.get('aliases')as FormArray);    fa.removeAt(i);    if(fa.length===0) this.addNewAlias();  }}

app.component.html

<form [formGroup]="fg" class="spaced">  <h3>Nested in Group:</h3>  <div formGroupName="address" class="spaced">    <label>      <input type="text" formControlName="street">      valid: {{fg.get('address').get('street')?.valid}}    </label>  </div>  <h3>Nested in Array:</h3>  <div formArrayName="aliases" *ngFor="let alias of fg.get('aliases').controls; let i = index;" class="border">    <div [formGroupName]="i">      <label>        Alias {{i+1}}:        <input formControlName="name" placeholder="Item name">valid: {{alias.get('name')?.valid}}      </label>      <button type="button" (click)="deleteAlias(i)">X</button>    </div>  </div>  <button type="button" (click)="addNewAlias()">add</button></form><div>form valid: {{fg?.valid}}</div>