TypeError: Cannot read property 'get' of undefined Ionic 3 /Angular 5

Question

I got the below error on Ionic 3 app.

TypeError: Cannot read property 'get' of undefined
    at Object.eval [as updateDirectives] (ng:///NewLoginPageModule/NewLoginPage.ngfactory.js:196:39)
    at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/vendor.js:14693:21)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13862:14)
    at callViewAction (http://localhost:8100/build/vendor.js:14212:21)
    at execComponentViewsAction (http://localhost:8100/build/vendor.js:14144:13)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13868:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14212:21)
    at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:14170:17)
    at checkAndUpdateView (http://localhost:8100/build/vendor.js:13863:5)
    at callViewAction (http://localhost:8100/build/vendor.js:14212:21)

.ts

    ulLoginForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {}

     ionViewDidLoad() {
       this.initForm();
     }

  initForm() {
    this.ulLoginForm = this.formBuilder.group({
       password: ['', Validators.required]
    })
  }

.html

 <form [formGroup]="ulLoginForm">                           
        <ion-list>
         <ion-item>
        <ion-input type="password" placeholder="Password"  formControlName="password"></ion-input>
        <p *ngIf="ulLoginForm.get('password').hasError('required') && ulLoginForm.get('password').touched" class="error" padding-left>Password
        is empty</p>
         </ion-item>
        </ion-list>
    </form>

Answer 1

the problem is that you want to access the formControl, but the initialization of the form is after the initialization of the component (because the ionViewDidLoad is executed after).

you could try to call the initForm() in the ngOnInit method, this is a lifecycle method of the angular framework:

export class YourComponent implements OnInit{    
    ulLoginForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
       this.initForm();
     }
}

Answer 2

If you can use angular life cycle hooks:

DEMO

export class HomePage implements OnInit {

  ngOnInit() {
    this.initForm();
  }
  ulLoginForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }
  initForm() {
    this.ulLoginForm = this.formBuilder.group({
      password: ['', Validators.required]
    })
  }
}

Answer 3

According to the Ionic 3 doc , I was right about my implementation above.

ionViewDidLoad void

Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page.

But it is wrong when I implemented it. We need to use Angular lifecycle hook here like so:

export class NewLoginPage implements OnInit {

  ngOnInit(){
     this.initForm();
   }
}