Error- Cannot read property 'controls' of null (Reactive Form- Adding a FormArray)

Question

I am facing an error can't sort out why it is showing this error need some help :

Cannot read property 'controls' of null

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):

ngOnInit() {
 this.route.params
 .subscribe(
 (params: Params) => {
     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 (<FormArray>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) => {
          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
      });
  }

Data Model Questionaire Containing Steering Model as an Array:

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')])
 ];

And the HTML Code:

<div class="col-xs-12" formArrayName = "steerings">
 <div class="row" *ngFor = "let quesCtrl of quesControl(); let i = index" [formGroupName] = "i">

 <div class="col-xs-4">
  <label for="proposal">Proposal Type</label>
  <select class="form-control" id="proposal" formControlName="proposal" #proposal>
  <option value="">Select</option>
  <option value="Proposal">Proposal</option>
  <option value="ndg">NDG</option>
  <option value="credit">Credit Line</option> 
  <option value="collateral">Collateral</option>
  <option value="asset">Asset</option> 
 </select>
 </div>

 <div class="col-xs-4">
 <label for="Label">Label</label>
 <select class="form-control" id="label" formControlName="label" #label>
 <option value="">Select</option>
 <option value="equal">Equal</option>
 <option value="notEqual">Not equal</option>
 <option value="greater">Greater than</option>
 <option value="less">Less than</option>
 <option value="con">Contained in a list</option>
 <option value="ntCon">Not Contained in a list</option>
 </select> 
 </div>

 <div class="col-xs-4">
 <label for="name">PRODUCT</label>
 <input type="text" class="form-control" id="product" formControlName="product" #product>
 </div>

 </div>
 </div>

Thanks in Advance!

REgards

Adnan

Answer 1

The important part of the code appears to be here:

quesControl() {
    return (<FormArray>this.questionaireForm.get('steerings')).controls;
}

Here is a quick debug version of the same method, which will help you solve your problem...

quesControl() {
    // Check this logs the class name, otherwise you've lost the context of this
    console.log(this.constructor.name);

    // Check what you get back here... is it null, or of the wrong type
    console.log(this.questionaireForm.get('steerings'));

    return (<FormArray>this.questionaireForm.get('steerings')).controls;
}

You can also use typeof to log the types of your variables if you need to dig deeper.