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>

It is not a good coding practice according to the Angular team. e.g. When we do a Unit testing and etc @fatemefazli — Sampath
– Sampath, Commented Aug 21, 2018 at 11:28
It is a life cycle hook of Ionic 3: @SaurabhAgrawal ionicframework.com/docs/api/navigation/NavController — Sampath
– Sampath, Commented Aug 21, 2018 at 11:35

zualexander · Accepted Answer · 2018-08-21 11:45:11Z

3

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();
     }
}

answered Aug 21, 2018 at 11:45

zualexander

685 bronze badges

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

Comments

Akj · Accepted Answer · 2018-08-21 11:38:09Z

1

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]
    })
  }
}

answered Aug 21, 2018 at 11:38

Akj

7,2513 gold badges31 silver badges41 bronze badges

Comments

Saurabh Agrawal · Accepted Answer · 2018-08-21 11:55:08Z

1

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();
   }
}

edited Aug 21, 2018 at 11:55

Saurabh Agrawal

7,7553 gold badges31 silver badges52 bronze badges

answered Aug 21, 2018 at 11:40

Sampath

66.2k70 gold badges329 silver badges462 bronze badges

2 Comments

Sampath Over a year ago

I wanted to give more info to the Ionic 3 community about the issue of ionViewDidLoad() method. That is why I have posted it here. @UnluckyAj

Akj Over a year ago

fine from my side. but you can also edit my answer if you want to put more content

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related