提交按钮在父组件时，如何从Angular子组件获取表单输入值？

看起来你遇到了Angular里很常见的父子组件数据传递问题——当父组件有多个同类型子组件，提交按钮又在父组件时，怎么拿到所有子组件里的matInput值对吧？你之前用@ViewChild只能获取到第一个子组件的实例，这是因为@ViewChild默认只会匹配第一个符合条件的组件。下面给你几种实用的解决方案，按需选择就行：

方案一：用@ViewChildren获取所有子组件实例 #

这是最直接的方式，适合你当前有多个同类型子组件的场景：

父组件TS代码修改： #

import { Component, OnInit, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
import { ChildComponent } from './child.component';

export class ParentComponent implements OnInit {
  // 用ViewChildren代替ViewChild，这样能拿到所有ChildComponent的实例列表
  @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;

  constructor(private cdRef: ChangeDetectorRef) { }

  ngOnInit() { }

  ngAfterViewInit() {
    // 这里可以遍历所有子组件，提前查看值
    this.childComponents.forEach(child => {
      console.log('单个子组件表单值：', child.myForm.value);
    });
    this.cdRef.detectChanges();
  }

  // 提交按钮的点击事件处理方法
  onSubmit() {
    // 收集所有子组件的表单值到数组里
    const allChildFormData = this.childComponents.map(child => child.myForm.value);
    console.log('所有子组件的表单数据：', allChildFormData);
    // 这里就可以把数据拿去提交接口或者做其他处理了
  }
}

子组件要暴露表单实例： #

得确保子组件里的myForm是public修饰的公共属性，不然父组件没法访问到它：

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  @Input() input: any;
  public myForm: FormGroup; // 这里一定要加public

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    // 初始化表单
    this.myForm = this.fb.group({
      myInput: [''],
      myInput2: ['']
    });
  }
}

方案二：用EventEmitter让子组件主动传值 #

如果想让父子组件解耦，不想让父组件直接依赖子组件的内部表单，这种方式更符合组件设计的最佳实践：

子组件代码修改： #

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  @Input() input: any;
  // 定义一个输出事件，用来向父组件传递表单值
  @Output() formValueUpdated = new EventEmitter<any>();
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      myInput: [''],
      myInput2: ['']
    });

    // 监听表单值的变化，一旦变化就主动传给父组件
    this.myForm.valueChanges.subscribe(formValue => {
      this.formValueUpdated.emit(formValue);
    });
  }

  // 也可以加个方法，让父组件主动调用获取最新值
  getCurrentFormValue() {
    return this.myForm.value;
  }
}

父组件代码修改： #

import { Component, OnInit, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
import { ChildComponent } from './child.component';

export class ParentComponent implements OnInit {
  @ViewChildren(ChildComponent) childComponents: QueryList<ChildComponent>;
  // 用来存储每个子组件的表单值，按顺序对应
  childFormData: any[] = [];

  constructor(private cdRef: ChangeDetectorRef) { }

  ngOnInit() { }

  // 接收子组件传来的表单值，index用来区分是哪个子组件
  onChildFormUpdated(value: any, index: number) {
    this.childFormData[index] = value;
  }

  onSubmit() {
    // 方式一：用之前存储的表单值
    console.log('存储的所有表单数据：', this.childFormData);

    // 方式二：主动调用子组件的方法获取最新值（更可靠，避免值不同步）
    const latestFormData = this.childComponents.map(child => child.getCurrentFormValue());
    console.log('最新的所有表单数据：', latestFormData);
  }
}

父组件HTML修改（绑定事件）： #

<parent-component>
  <!-- 给每个子组件绑定事件，传入索引区分 -->
  <child-component [input]="inputValue" (formValueUpdated)="onChildFormUpdated($event, 0)">
  </child-component>
  <child-component [input]="inputValue" (formValueUpdated)="onChildFormUpdated($event, 1)">
  </child-component>
  <button mat-stroked-button (click)="onSubmit()"> Submit </button>
</parent-component>

方案三：用共享服务管理表单数据（适合复杂场景） #

如果你的组件层级比较深，或者有多个地方需要用到这些表单数据，创建一个共享服务来管理会更清晰：

先创建一个服务： #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FormDataService {
  // 用BehaviorSubject存储所有表单数据，初始值为空数组
  private formDataSubject = new BehaviorSubject<any[]>([]);
  // 对外暴露可观察对象，让组件订阅
  formData$ = this.formDataSubject.asObservable();

  // 更新指定索引的表单数据
  updateFormData(index: number, data: any) {
    const currentData = this.formDataSubject.value;
    currentData[index] = data;
    // 发送新的数组，确保订阅者能收到更新
    this.formDataSubject.next([...currentData]);
  }

  // 获取所有表单数据
  getAllFormData() {
    return this.formDataSubject.value;
  }
}

子组件使用服务： #

import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormDataService } from './form-data.service';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent implements OnInit {
  @Input() input: any;
  @Input() index: number; // 给每个子组件传一个唯一索引
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private formDataService: FormDataService) { }

  ngOnInit() {
    this.myForm = this.fb.group({
      myInput: [''],
      myInput2: ['']
    });

    // 表单值变化时，更新服务里的数据
    this.myForm.valueChanges.subscribe(value => {
      this.formDataService.updateFormData(this.index, value);
    });
  }
}

父组件使用服务： #

import { Component, OnInit } from '@angular/core';
import { FormDataService } from './form-data.service';

export class ParentComponent implements OnInit {
  constructor(private formDataService: FormDataService) { }

  ngOnInit() { }

  onSubmit() {
    // 从服务里获取所有表单数据
    const allFormData = this.formDataService.getAllFormData();
    console.log('所有表单数据：', allFormData);
  }
}

父组件HTML修改（传入索引）： #

<parent-component>
  <child-component [input]="inputValue" [index]="0">
  </child-component>
  <child-component [input]="inputValue" [index]="1">
  </child-component>
  <button mat-stroked-button (click)="onSubmit()"> Submit </button>
</parent-component>

最后给你总结下怎么选：

• 简单的父子组件关系，直接用方案一最省事；
• 想要组件之间解耦，避免父组件依赖子组件内部细节，选方案二；
• 组件层级复杂或者多组件需要共享数据，方案三会更合适。

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