Angular FormArray: referencing dynamically added FormControl in template

Question

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:

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);
    (<FormArray>this.reviewForm.get('controlArray')).push(control);
  }

}

And it is my component's template:

<form [formGroup]="reviewForm" (ngSubmit)="onSubmit()">
  <div class="example-label">
    <span class='block'>    
              <span *ngIf="selectedForm">
                      <h2 class="example-heading">{{displayForm}} </h2>
              </span>
    <div formArrayName="controlArray">
      <div *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">
        <table>
          <tr>
            <span *ngIf="control.value">
                    <td> 
                      <label>{{control.value.label}}</label>                           
            </td>
            <td><span *ngIf="control.value.controlType == 'select'">                
                      <md-select placeholder="{{control.value.label}}" [formControlName]="i" >
                        <md-option *ngFor="let option of control.value.options; let i=index" 
                        [value]="option">{{control.value.options[i]}}</md-option>                  
                      </md-select>
                    </span></td>
            <td> <span *ngIf="control.value.controlType == 'text'">
              <md-form-field class="example-full-width">
                <input mdInput type="text" placeholder="{{control.value.placeholder}}" [formControlName]="i" >
              </md-form-field>  
          </span></td>
            <td> <span *ngIf="control.value.controlType == 'radio'">
              <md-radio-group>
                      <span *ngFor="let option of control.value.options">
                        <md-radio-button name="gender" value="{{option}}" [formControlName]="i" >{{option}} </md-radio-button>
                      </span>
              </md-radio-group>
              </span>
            </td>
            <td> <span *ngIf="control.value.controlType == 'checkbox'">
                      <md-checkbox value="{{control.value.controlType}}" [formControlName]="i" > </md-checkbox>
                    </span></td>

            <td> <span *ngIf="control.value.controlType == 'textarea'">
                      <textarea name="Comment" id="" cols="30" rows="10" [formControlName]="i" ></textarea>  
                    </span></td>

            <td> <span *ngIf="control.value.controlType == 'button'">
                        <button md-raised-button value="{{control.value}}" [formControlName]="i" >Button</button>  
                    </span> </td>
            </span>
          </tr>
        </table>
      </div>
    </div>
    </span>
  </div>
</form>

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

Answer 1

You can bind this way:

reviewForm.controls.controlArray.controls[i].controls.DATAYOULIKEBIND.value

Answer 2

I had the same problem and solved it with a getter in the component class.

get controlArray(): FormArray {
    return <FormArray> this.reviewForm.get('controlArray');
}

Note the cast to FormArray, otherwise the getter returns AbstractControl and you can't access any of the array properties or functions.

Then in the template you can do something like this.

<div formArrayName="controlArray">
    <div *ngFor="let control of controlArray.controls; let i = index" >

Answer 3

You should do something like this. Add [formGroupName]=i to next div where you have added formArray. So that Angular knows the correct traversal. Hope this helps. I had the same issue sometime before and this fix helped me

<div formArrayName="controlArray"> <div [formGroupName]=i *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">