Angular父组件如何直接获取子组件的NgForm引用以重置表单？

方法1：通过@ViewChild结合read选项直接读取子组件内的表单 #

如果子组件模板中只有一个NgForm实例，且表单是子组件的根元素（或第一个表单），可以直接在父组件中通过子组件的模板变量，结合read: NgForm选项获取表单引用：

1. 父组件模板代码：

<app-header #headerChild></app-header>
<app-content #contentChild></app-content>

<button (click)="resetAllForms()">重置所有表单</button>

2. 父组件TypeScript代码：

import { Component, ViewChild, NgForm } from '@angular/core';
import { HeaderComponent } from './header.component';
import { ContentComponent } from './content.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('headerChild', { read: NgForm, static: false }) headerForm!: NgForm;
  @ViewChild('contentChild', { read: NgForm, static: false }) contentForm!: NgForm;

  resetAllForms() {
    this.headerForm?.resetForm();
    this.contentForm?.resetForm();
  }
}

方法2：子组件暴露内部表单引用（更可控） #

如果子组件内有多个表单，或者不想依赖表单在子组件中的位置，可以让子组件主动把内部表单引用暴露出来：

1. 子组件（以HeaderComponent为例）代码：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  @ViewChild('headerForm') headerForm!: NgForm;
}

2. 父组件模板：

<app-header #headerChild></app-header>
<app-content #contentChild></app-content>

3. 父组件TypeScript代码：

import { Component, ViewChild } from '@angular/core';
import { HeaderComponent } from './header.component';
import { ContentComponent } from './content.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChild('headerChild') headerChild!: HeaderComponent;
  @ViewChild('contentChild') contentChild!: ContentComponent;

  resetAllForms() {
    this.headerChild.headerForm?.resetForm();
    this.contentChild.contentForm?.resetForm();
  }
}

这种方式不需要额外类型转换，通过子组件实例直接访问其暴露的表单引用，类型明确且可控。

方法3：@ViewChildren批量获取所有表单 #

如果需要批量操作父组件视图内所有的NgForm（包括子组件内的），可以用@ViewChildren：

import { Component, ViewChildren, QueryList, NgForm } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  @ViewChildren(NgForm) allForms!: QueryList<NgForm>;

  resetAllForms() {
    this.allForms.forEach(form => form.resetForm());
  }
}

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