title: Angular FormArray: referencing dynamically added FormControl in template
body: <p>I am working on Angular Reactive forms, I have added a couple of FormControl into FormArray dynamically, but I am getting issue to reference those FormControls in my template while binding them with formControlName. In template I assigned loop index variable "i" to formControlName but its not working.
  I get "No value accessor for form control with path" by binding controls with formControlName.
  here is my component class code:</p>
  
  <pre><code>export class Control {
    constructor(public controlType?: string, public label?: string, public required?: boolean, public placeholder?: string,
      public options?: string[], public value?: string) { }
  }
  
  export class FormComponent implements OnInit {
    reviewForm: FormGroup;
  
    constructor(public formService: FormService, public dialog: MdDialog) { }
  
  
    selectedControl: any = null;
    label: string;
  
    ngOnInit() {
      this.reviewForm = new FormGroup({
        'controlArray': new FormArray([
        ])
      });
    }
  
    addControl() {
      const myControl: Control = new Control(this.selectedControl.name, this.label, this.isRequired,
        this.selectedControl.attributes.value, this.selectedControl.attributes.options, 'null');
      var control: FormControl = new FormControl(myControl);
      (&lt;FormArray&gt;this.reviewForm.get('controlArray')).push(control);
    }
  
  }
  </code></pre>
  
  <p>And it is my component's template:</p>
  
  <pre><code>&lt;form [formGroup]="reviewForm" (ngSubmit)="onSubmit()"&gt;
    &lt;div class="example-label"&gt;
      &lt;span class='block'&gt;    
                &lt;span *ngIf="selectedForm"&gt;
                        &lt;h2 class="example-heading"&gt;{{displayForm}} &lt;/h2&gt;
                &lt;/span&gt;
      &lt;div formArrayName="controlArray"&gt;
        &lt;div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index"&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;span *ngIf="control.value"&gt;
                      &lt;td&gt; 
                        &lt;label&gt;{{control.value.label}}&lt;/label&gt;                           
              &lt;/td&gt;
              &lt;td&gt;&lt;span *ngIf="control.value.controlType == 'select'"&gt;                
                        &lt;md-select placeholder="{{control.value.label}}" [formControlName]="i" &gt;
                          &lt;md-option *ngFor="let option of control.value.options; let i=index" 
                          [value]="option"&gt;{{control.value.options[i]}}&lt;/md-option&gt;                  
                        &lt;/md-select&gt;
                      &lt;/span&gt;&lt;/td&gt;
              &lt;td&gt; &lt;span *ngIf="control.value.controlType == 'text'"&gt;
                &lt;md-form-field class="example-full-width"&gt;
                  &lt;input mdInput type="text" placeholder="{{control.value.placeholder}}" [formControlName]="i" &gt;
                &lt;/md-form-field&gt;  
            &lt;/span&gt;&lt;/td&gt;
              &lt;td&gt; &lt;span *ngIf="control.value.controlType == 'radio'"&gt;
                &lt;md-radio-group&gt;
                        &lt;span *ngFor="let option of control.value.options"&gt;
                          &lt;md-radio-button name="gender" value="{{option}}" [formControlName]="i" &gt;{{option}} &lt;/md-radio-button&gt;
                        &lt;/span&gt;
                &lt;/md-radio-group&gt;
                &lt;/span&gt;
              &lt;/td&gt;
              &lt;td&gt; &lt;span *ngIf="control.value.controlType == 'checkbox'"&gt;
                        &lt;md-checkbox value="{{control.value.controlType}}" [formControlName]="i" &gt; &lt;/md-checkbox&gt;
                      &lt;/span&gt;&lt;/td&gt;
  
              &lt;td&gt; &lt;span *ngIf="control.value.controlType == 'textarea'"&gt;
                        &lt;textarea name="Comment" id="" cols="30" rows="10" [formControlName]="i" &gt;&lt;/textarea&gt;  
                      &lt;/span&gt;&lt;/td&gt;
  
              &lt;td&gt; &lt;span *ngIf="control.value.controlType == 'button'"&gt;
                          &lt;button md-raised-button value="{{control.value}}" [formControlName]="i" &gt;Button&lt;/button&gt;  
                      &lt;/span&gt; &lt;/td&gt;
              &lt;/span&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;/span&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>In my component class I only have FormArray in FormGroup. In addControl function I made a custom control and pass this control as a first parameter to a FormControl. Afterwards I push this FormControl into my FormArray. Please help, in template How do I associate formControlName to FormControls. Thanks</p>