Ionic 3设置表单报错：Cannot read property 'get' of undefined 排查

我来帮你排查这个问题，控制台抛出的"Cannot read property 'get' of undefined"错误，核心原因是模板在渲染时，SettingsForm还没完成初始化，导致你调用SettingsForm.get()时触发了undefined异常。下面是具体的问题分析和解决方案：

问题根源 #

你在ionViewDidLoad生命周期钩子中调用buildSettingsForm()来创建表单，但Ionic的视图渲染时机可能早于ionViewDidLoad执行完成，这时候模板里的SettingsForm还是undefined，直接调用它的get()方法自然会报错。

另外还有几个小问题也需要注意：

• 模板里的错误提示文本有误（比如firstName的提示写的是"Please choose the gender"，明显和字段不匹配）
• populateForm()的调用时机不对，可能在this.user还未获取到数据时就执行，导致填充表单失败

解决方案 #

1. 使用安全导航操作符（?.）避免undefined调用 #

在模板中访问SettingsForm的方法时，加上安全导航操作符，确保只有当SettingsForm存在时才调用get()：

<!-- 修正后的firstName错误提示 -->
<div *ngIf="!SettingsForm?.get('firstName')?.valid && SettingsForm?.get('firstName')?.touched" class="help-block">Please enter a valid first name</div>

<!-- lastName同理 -->
<div *ngIf="!SettingsForm?.get('lastName')?.valid && SettingsForm?.get('lastName')?.touched" class="help-block">Please enter a valid last name</div>

2. 提前初始化表单 #

把buildSettingsForm()移到构造函数中，这样组件初始化时就创建好表单，视图渲染时SettingsForm已经存在：

constructor(
 public navCtrl: NavController,
 public navParams: NavParams,
 private fb: FormBuilder,
 private alertCtrl: AlertController,
 private tokenProvider: TokenProvider,
 private usersProvider: UsersProvider
) {
 this.tabElement = document.querySelector('.tabbar.show-tabbar');
 this.socket = io('http://localhost:3000');
 // 移到构造函数中提前创建表单
 this.buildSettingsForm();
}

3. 确保表单填充时机正确 #

在GetUser()的订阅回调中调用populateForm()，保证只有当用户数据加载完成后才填充表单：

GetUser(id) {
 this.usersProvider.GetUserById(id).subscribe(data => {
 this.user = data.result;
 // 数据加载完成后再填充表单
 this.populateForm();
 });
}

4. 可选：用*ngIf确保表单存在后再渲染模板 #

如果担心表单初始化还是有延迟，可以在表单标签上加上*ngIf="SettingsForm"，确保只有表单存在时才渲染表单内容：

<form [formGroup]="SettingsForm" (ngSubmit)="UpdateUser()" *ngIf="SettingsForm">
 <!-- 表单内容 -->
</form>

额外的小修正 #

记得把模板里错误的提示文本改成对应字段的提示，比如把"Please choose the gender"改成和姓名、城市等字段匹配的提示信息，避免用户混淆。

内容的提问来源于stack exchange，提问作者NewTech Lover