TypeError：无法读取未定义 Ionic 3 /Angular 5 的属性“获取”答案

【问题标题】：TypeError: Cannot read property 'get' of undefined Ionic 3 /Angular 5TypeError：无法读取未定义 Ionic 3 /Angular 5 的属性“获取”
【发布时间】：2019-01-27 13:53:29
【问题描述】：

我在Ionic 3 应用程序上收到以下错误。

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>

【问题讨论】：

在构造函数中调用this.initForm();。
根据 Angular 团队的说法，这不是一个好的编码实践。例如当我们进行单元测试等时@fatemefazli
@Sampath 你能解释一下吗？
btw @Sampath 你在哪里打电话给ionViewDidLoad()??
是Ionic 3的生命周期钩子：@SaurabhAgrawal ionicframework.com/docs/api/navigation/NavController

标签： angular typescript ionic3

【解决方案1】：

根据Ionic 3doc，我上面的实现是对的。

ionViewDidLoad 无效

在页面加载后运行。此事件每页仅发生一次正在创建。如果页面离开但被缓存，则此事件将在随后的观看中不会再次触发。 ionViewDidLoad 事件是放置页面设置代码的好地方。

但是当我实现它时它是错误的。我们需要在这里使用Angular 生命周期钩子，如下所示：

export class NewLoginPage implements OnInit {

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

【讨论】：

我想向Ionic 3 社区提供有关ionViewDidLoad() 方法问题的更多信息。这就是为什么我把它贴在这里。 @UnluckyAj
对我来说很好。但如果您想添加更多内容，也可以编辑我的答案

【解决方案2】：

问题是你想访问formControl，但是表单的初始化是在组件初始化之后（因为ionViewDidLoad是在之后执行的）。

你可以尝试在ngOnInit方法中调用initForm()，这是angular框架的生命周期方法：

export class YourComponent implements OnInit{    
    ulLoginForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {}

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

【讨论】：

【解决方案3】：

如果你可以使用角度生命周期钩子：

DEMO

export class HomePage implements OnInit {

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

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

【讨论】：