Angular 5使用ViewChild获取表单报错：无法读取undefined的属性

我来帮你搞定这个报错！你遇到的TypeError: Cannot read property 'form' of undefined，主要是两个核心问题导致的，咱们一步步拆解解决：

1. 先修复模板里的语法错误 #

你的模板中写的是ngif="show"，这是个拼写错误——Angular的结构型指令*ngIf必须带星号，否则指令不会生效，这会直接影响表单元素的渲染逻辑。先把模板改成：

<div *ngIf="show"> 
  <form #campaignForm="ngForm"> 
    <input type="text" [ngModel]='data.input' (ngModelChange)='updateMe()' name='input' required/> 
  </form> 
</div>

2. 核心问题：*ngIf动态移除DOM导致ViewChild无法获取元素 #

*ngIf的工作机制是当条件为false时，直接从DOM中移除元素；当条件变为true时，才会重新渲染元素。而你在OnInit或AfterViewInit钩子中尝试访问this.campaignForm.form时，如果show的初始值是false，此时表单元素还没被渲染到DOM里，@ViewChild('campaignForm')自然拿不到实例，就会抛出undefined的错误。

解决方案一：等待表单元素渲染完成后再访问 #

你可以通过监听show的状态变化，或者利用Angular的生命周期钩子，等表单元素确实存在后再操作：

方式A：监听show属性的变化

在组件中给show设置一个setter，当它变为true时，等待DOM渲染完成后再访问表单：

import { Component, Input, ViewChild, NgForm } from '@angular/core';

@Component({
  selector: 'form-child',
  template: `<div *ngIf="show"> <form #campaignForm="ngForm"> <input type="text" [ngModel]='data.input' (ngModelChange)='updateMe()' name='input' required/> </form> </div> `
})
export class FormChild {
  @ViewChild('campaignForm') campaignForm: NgForm;
  private _show: boolean;
  @Input()
  set show(value: boolean) {
    this._show = value;
    if (value) {
      // 用setTimeout等待DOM完成渲染
      setTimeout(() => {
        if (this.campaignForm) {
          // 现在可以安全访问表单了
          console.log(this.campaignForm.form);
          // 在这里执行你的表单操作逻辑
        }
      });
    }
  }
  get show(): boolean {
    return this._show;
  }
  // 其他代码...
}

方式B：利用ngAfterViewChecked钩子

这个钩子会在每次视图更新后触发，我们可以在这里判断表单是否已存在：

import { Component, ViewChild, NgForm, AfterViewChecked } from '@angular/core';

@Component({
  selector: 'form-child',
  template: `<div *ngIf="show"> <form #campaignForm="ngForm"> <input type="text" [ngModel]='data.input' (ngModelChange)='updateMe()' name='input' required/> </form> </div> `
})
export class FormChild implements AfterViewChecked {
  @ViewChild('campaignForm') campaignForm: NgForm;
  @Input() show: boolean;
  private hasAccessedForm = false;

  ngAfterViewChecked() {
    // 只有当show为true、表单存在且未访问过时，才执行逻辑
    if (this.show && this.campaignForm && !this.hasAccessedForm) {
      console.log(this.campaignForm.form);
      // 执行你的表单操作
      this.hasAccessedForm = true; // 标记已访问，避免重复执行
    }
  }
  // 其他代码...
}

解决方案二：用[hidden]替代*ngIf #

如果你不需要移除DOM，只是想隐藏元素，可以把*ngIf换成[hidden]——它只会通过CSS隐藏元素，不会从DOM中移除，这样ViewChild在组件初始化时就能拿到表单实例：

<div [hidden]="!show"> 
  <form #campaignForm="ngForm"> 
    <input type="text" [ngModel]='data.input' (ngModelChange)='updateMe()' name='input' required/> 
  </form> 
</div>

注意：使用[hidden]时要确保没有其他CSS规则覆盖它的display属性，否则元素可能无法正常隐藏。

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