0

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

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

2
  • add a valid return type to the function Commented Jan 1, 2018 at 19:52
  • @arvind on which function sorry i couldn't understand? Commented Jan 1, 2018 at 20:38

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

4 Comments

thank you for your suggestion i have tried it..This is what happening the Form Array takes a null value don't know why..Could you please help me out ..
i have added an image of the logs..Can you please figure out the problem?
Do you know why it calls quesControl three times? On the third call, this.questionaireForm.get('steerings') is null - but the previous two calls show that it isn't null.
Hi, Thank you for your help i have found the problem. The problem was that in the Form Group i was not passing steerings form control hence it turned to null after the subscription terminates.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.