title: Angular FormArray returns null on ngOnInit
body: <p>I have a child component where I have two <code>FormGroup</code>. One with simple FormControl and other is with <code>FormArray</code>. I followed this <a href="https://stackblitz.com/edit/angular-form-array-example-rbqdfb" rel="nofollow noreferrer">stackblitz</a> example as well as many other which is related to <code>FormArray</code> still no idea why it is not working.</p>
  <p>custom-condition.ts</p>
  <pre><code>  @Input() parentForm: FormGroup;
    customConditions: FormGroup
  
    ngOnInit() {
      this.initForm()
    }
  
    initForm(){
      this.customConditions = this.fb.group({
        custom: this.fb.array([])
      });
      this.getCustomArray.push(this.getCustomConditionController())
  
      this.parentForm.addControl(&quot;CustomConditions&quot;, this.customConditions);
    }
  
    get getCustomArray(): FormArray {
      return &lt;FormArray&gt;this.customConditions.get(&quot;custom&quot;) 
    }
  
    getCustomConditionController(): FormGroup {
      return this.fb.group({
        ConditionArabic: this.fb.control(&quot;&quot;),
        ConditionEnglish: this.fb.control(&quot;&quot;)
      });
    }
  
    addCustomConditions() {
      this.getCustomArray.push(this.getCustomConditionController())
    }
  
    removeCustomConditions(i: number) {
      this.getCustomArray.removeAt(i)
    }
  
    isLastRow(rowIndex: any) {
      return this.customConditions.controls.length == rowIndex + 1
    }      
  </code></pre>
  <p>custom-condtion.html</p>
  <pre><code>&lt;div class=&quot;row&quot; [formGroup]=&quot;customConditions&quot;&gt;
      &lt;ng-container formArrayName=&quot;custom&quot;&gt;
          &lt;div class=&quot;col-12&quot; *ngFor=&quot;let fg of getCustomArray.controls; let i = index&quot;&gt;
              &lt;div class=&quot;row mt-3 mb-3&quot; [formGroupName]='fg'&gt;
                  &lt;div class=&quot;col-4&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label for=&quot;ConditionEnglish{{i}}&quot; class=&quot;control-label&quot;&gt;Condition English&lt;/label&gt;
                          &lt;input 
                             type=&quot;text&quot; 
                             class=&quot;form-control&quot; 
                             tabindex=&quot;{{i+1}}&quot; 
                             id=&quot;ConditionEnglish{{i}}&quot;
                             formControlName=&quot;ConditionEnglish&quot; 
                             autocomplete=&quot;off&quot; /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-4&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label for=&quot;ConditionArabic{{i}}&quot; class=&quot;control-label&quot;&gt;Condition Arabic&lt;/label&gt;
                          &lt;input 
                             type=&quot;text&quot; 
                             name=&quot;ConditionArabic&quot; 
                             class=&quot;form-control&quot;
                             tabindex=&quot;{{i+1}}&quot; 
                             id=&quot;ConditionArabic{{i}}&quot;
                             formControlName=&quot;ConditionArabic&quot; 
                             autocomplete=&quot;off&quot; /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-4&quot;&gt;
                      &lt;span class=&quot;file-add&quot; *ngIf=&quot;i &gt; 0&quot;&gt;
                        &lt;a (click)=&quot;removeCustomConditions(i)&quot;&gt;&lt;i class=&quot;fal fa-trash-alt&quot;&gt;&lt;/i&gt;&lt;/a&gt; 
                      &lt;/span&gt;
                      &lt;span class=&quot;file-add&quot; *ngIf=&quot;isLastRow(i)&quot;&gt;
                        &lt;a (click)=&quot;addCustomConditions()&quot;&gt;&lt;i class=&quot;fal fa-plus-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt; 
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Error getting:
  <code>ERROR Error: Cannot find control with path: 'custom -&gt; [object Object]'</code> also <code>this.customConditions.get(&quot;custom&quot;)</code> returns empty array after component loading and that is why <code>getCustomArray.controls</code> in empty so html is not rendering.</p>
  <p>What am I doing wrong here?</p>