CODEWITHSUNDEEP
angularnested-forms
kasimkha
kasimkha

Reputation: 153

Cannot read property 'addControl' of null

Nested form, trying to add one form inside other but getting error 'Cannot read property 'addControl' of null'. FormGroupDirective not returning parent 'form' it seems. Trying to apply Sub-Forms approach for nesting. 

    <p>
      sub-forms-approach works!
    </p>
    <form [formGroup]="form">
      <!--<input formControlName="name">-->
      <app-sub-forms-approach-child-one></app-sub-forms-approach-child-one>

    </form>  
    state: {{form.status}}
    data:  {{ form.value | json}}

Parent Component 

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

    @Component({
      selector: 'app-sub-forms-approach',
      templateUrl: './sub-forms-approach.component.html',
      styleUrls: ['./sub-forms-approach.component.css']
    })
    export class SubFormsApproachComponent implements OnInit {
    form= new FormGroup({

        });
      constructor() { 
      }
      ngOnInit() {
      }

    }

Child Form HTML

sub-forms-approach-child-one works! 

    <div formGroupName='address'>
      <input formControlName="pin">
      <input formControlName="street">
    </div>

Child Form Component 

    import { Component, OnInit } from '@angular/core';
    import { ControlContainer, FormGroupDirective, FormControl, FormGroup} 
     from '@angular/forms';
    @Component({
      selector: 'app-sub-forms-approach-child-one',
      templateUrl: './sub-forms-approach-child-one.component.html',
      styleUrls: ['./sub-forms-approach-child-one.component.css'],
      viewProviders: [
        {provide: ControlContainer,
          useExisting: FormGroupDirective 
        }
      ]
    })
    export class SubFormsApproachChildOneComponent implements OnInit {
      form;
      constructor(parent: FormGroupDirective) { 
        this.form = parent.form;
        console.log(parent.form);
      }

      ngOnInit() {
        this.form.addControl('address', new FormGroup({
          pin: new FormControl(),
          street: new FormControl()
        }))
      }

    }

Upvotes: 9

Views: 29072

Answers (3)

greg
greg

Reputation: 1873

alluded to in other comments, posts here... I had a double typo...

FormGroup should be formGroup (lower case camel) and it needs to be in square brackets because it points to a variable

This was causing the error

FormGroup="myFormGroup"

This corrected the error

[formGroup]="myFormGroup"

Upvotes: 0

Jeremias Nater
Jeremias Nater

Reputation: 803

The same error appeared to me when using the input property formControlName="mainForm" without a wrapping form group

Upvotes: 9

yurzui
yurzui

Reputation: 214047

You can't get FormGroupDirective.form in constructor because @Input form property is not initialized yet. Angular firstly instantiates component classes during node creation and only after that initializes input properties.

So move your code to ngOnInit hook:

constructor(private parent: FormGroupDirective) {}

ngOnInit() {
  this.form = this.parent.form;
  this.form.addControl('address', new FormGroup({
    pin: new FormControl(),
    street: new FormControl()
  }))
}

Ng-run Example

Upvotes: 8

Related Questions