Angular 6 Forms Cannot find control error

Question

I am trying to build form arrays in Angular. When the data didn't show up, I minimized the code to show behavior. I must use form arrays for the final code. Help me please get through this. I'm using Angular 6.

Why am I getting this error:

Error: Cannot find control with name: 'resultOptions'

// My component .ts file

import {FormControl, FormArray, FormBuilder, FormGroup} from '@angular/forms';
export class MyComponent implements OnInit, OnDestroy  {

  private resultForm: FormGroup;
  private destroyed$: Subject<boolean> = new Subject();

  resultData = [
    {
      text: 'My Text',
    }];

  constructor(private formBuilder: FormBuilder) {

    this.resultForm = this.formBuilder.group({
      childData: this.formBuilder.array([])
    });

    this.setMainOptions();
  }

  setMainOptions() {
    const control = <FormArray>this.resultForm.controls.childData;
    this.resultData.forEach(x => {
      control.push(this.formBuilder.group({
        text: new FormControl()}))
    })
  }
  ngOnInit() {
  }

  ngOnDestroy() {
    this.destroyed$.complete();
  }
}

// my html

    <form [formGroup]="resultForm">
<div formArrayName="resultOptions">
  <div *ngFor="let mainOption of resultForm.get('childData').controls; let i=index">
    <div [formGroupName]="i">
      <input [formControlName]="text" />
    </div>
  </div>
</div>
</form>

<pre>{{resultForm.value | json}}</pre>

Greatly appreciated!

Answer 1

i tried to reproduce your error with stackblitz and found that you have to modify the code to accomplish what you want, with my best understanding. please check the link the code now not throwing any error in console.

The changed code as follows:

  /// Component 

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import {FormControl, FormArray, FormBuilder, FormGroup} from '@angular/forms';

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  implements OnInit, OnDestroy  {

    private resultForm: FormGroup;
    // private destroyed$: Subject<boolean> = new Subject();

    resultData = [
      {
        text: 'My Text 1',
      },
      {
        text: 'My Text 2',
      },
      {
        text: 'My Text 3',
      },
      {
        text: 'My Text 4',
      }];

    constructor(private formBuilder: FormBuilder) {

      this.resultForm = this.formBuilder.group({
        childData: this.formBuilder.array([])
      });

      this.setMainOptions();
    }

    setMainOptions() {
      const control = <FormArray>this.resultForm.controls.childData;
      this.resultData.forEach(x => {
        control.push( new FormControl(x.text))
      })
    }

    ngOnInit() {
    }

    ngOnDestroy() {
      // this.destroyed$.complete();
    }
  }

\\\ HTML
<form [formGroup]="resultForm">
<div formArrayName="childData">
  <ng-container> 
  <div *ngFor="let mainOption of resultForm.get('childData').controls; let i=index">
      <input formControlName='{{i}}' />
  </div>
  </ng-container>
</div>
</form>

{{resultForm.get('childData').controls.length}}

<pre>{{resultForm.value | json}}</pre>