title: Error- Cannot read property 'controls' of null (Reactive Form- Adding a FormArray)
body: <p>I am facing an error can't sort out why it is showing this error need some help : 
  <a href="https://i.stack.imgur.com/VD9Rq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VD9Rq.png" alt="enter image description here"></a></p>
  
  <p>Cannot read property 'controls' of null</p>
  
  <p>Here is my code TS (not pasting the whole code though the function where i am initializing the form where actually it is catching an error):</p>
  
  <pre><code>ngOnInit() {
   this.route.params
   .subscribe(
   (params: Params) =&gt; {
       this.id = +params['id'];
       this.editMode = params['id'] != null;
       this.initForm();});
   }
  
  
  
  quesControl() {
     line 79:  console.log(this.constructor.name);
     line 80: console.log(this.questionaireForm.get('steerings'));
      return (&lt;FormArray&gt;this.questionaireForm.get('steerings')).controls;
  }
  
  
  private initForm() {
      let questionaireName     = '';
      let questionaireTitle    = '';
      let questionaireType     = '';
      let questionaireLevel    = '';
      let questionaireGroup    = '';
      const questionaireSteerings = new FormArray([]);
  
      if (this.editMode) {
        this.questionaireService.getQuestionaireById(this.id).subscribe(
          (questionaireRec: Questionaire) =&gt; {
            questionaireName  = questionaireRec.name;
            questionaireTitle = questionaireRec.title;
            questionaireType  = questionaireRec.type;
            questionaireLevel = questionaireRec.level;
            questionaireGroup = questionaireRec.group;
            this.questionaireForm = new FormGroup ({
              'name'    : new FormControl (questionaireName,  Validators.required),
              'title'   : new FormControl (questionaireTitle, Validators.required),
              'type'    : new FormControl (questionaireType,  Validators.required),
              'level'   : new FormControl (questionaireLevel, Validators.required),
              'group'   : new FormControl (questionaireGroup, Validators.required)
            });
            if (questionaireRec['steerings']) {
              for (const steeringCtrl of questionaireRec.steerings) {
                line 110: console.log(steeringCtrl);
                questionaireSteerings.push(
                 new FormGroup({
                   'proposal': new FormControl (steeringCtrl.proposal, Validators.required),
                   'label': new FormControl (steeringCtrl.label, Validators.required),
                   'product': new FormControl (steeringCtrl.product, Validators.required)
                 })
                );
              }
            }
          }
        );
      }
        this.questionaireForm = new FormGroup ({
          'name'    : new FormControl (questionaireName,  Validators.required),
          'title'   : new FormControl (questionaireTitle, Validators.required),
          'type'    : new FormControl (questionaireType,  Validators.required),
          'level'   : new FormControl (questionaireLevel, Validators.required),
          'group'   : new FormControl (questionaireGroup, Validators.required),
          'steerings': questionaireSteerings
        });
    }
  </code></pre>
  
  <p>Data Model Questionaire Containing Steering Model as an Array:</p>
  
  <pre><code>const questionaire: Questionaire[] = [
   new Questionaire(0, 'Questionaire for NRR consumer customer', '58ABC', '57ABC', '11/10/2016','NRR', 'greyCase', 'Proposal', 'general'),
   new Questionaire(1, 'Questionaire for RR customer', '7865C', '58ABC', '12/30/2017','RR', 'regulatory', 'credit', 'mortgage',[
   new Steerings('proposal', 'equal', 'ok'),new Steerings('proposal', 'equal', 'ok')]),
   new Questionaire(2, 'Questionaire for loan demanding customers', '58ABC', '', '','Loan', 'greyCase', 'credit', 'risk', [
   new Steerings('proposal', 'equal', 'ok')])
   ];
  </code></pre>
  
  <p>And the HTML Code:</p>
  
  <pre><code>&lt;div class="col-xs-12" formArrayName = "steerings"&gt;
   &lt;div class="row" *ngFor = "let quesCtrl of quesControl(); let i = index" [formGroupName] = "i"&gt;
  
   &lt;div class="col-xs-4"&gt;
    &lt;label for="proposal"&gt;Proposal Type&lt;/label&gt;
    &lt;select class="form-control" id="proposal" formControlName="proposal" #proposal&gt;
    &lt;option value=""&gt;Select&lt;/option&gt;
    &lt;option value="Proposal"&gt;Proposal&lt;/option&gt;
    &lt;option value="ndg"&gt;NDG&lt;/option&gt;
    &lt;option value="credit"&gt;Credit Line&lt;/option&gt; 
    &lt;option value="collateral"&gt;Collateral&lt;/option&gt;
    &lt;option value="asset"&gt;Asset&lt;/option&gt; 
   &lt;/select&gt;
   &lt;/div&gt;
  
   &lt;div class="col-xs-4"&gt;
   &lt;label for="Label"&gt;Label&lt;/label&gt;
   &lt;select class="form-control" id="label" formControlName="label" #label&gt;
   &lt;option value=""&gt;Select&lt;/option&gt;
   &lt;option value="equal"&gt;Equal&lt;/option&gt;
   &lt;option value="notEqual"&gt;Not equal&lt;/option&gt;
   &lt;option value="greater"&gt;Greater than&lt;/option&gt;
   &lt;option value="less"&gt;Less than&lt;/option&gt;
   &lt;option value="con"&gt;Contained in a list&lt;/option&gt;
   &lt;option value="ntCon"&gt;Not Contained in a list&lt;/option&gt;
   &lt;/select&gt; 
   &lt;/div&gt;
  
   &lt;div class="col-xs-4"&gt;
   &lt;label for="name"&gt;PRODUCT&lt;/label&gt;
   &lt;input type="text" class="form-control" id="product" formControlName="product" #product&gt;
   &lt;/div&gt;
  
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in Advance!</p>
  
  <p>REgards</p>
  
  <p>Adnan</p>