Angular父子组件表单结果共享：获取选中值的问题排查与解决

原代码存在的问题 #

1. 子组件onChangeEvent方法中错误地重复添加simple控件，还将原本的FormControl替换为FormGroup，直接破坏了表单结构，导致值无法正常获取
2. 父组件未将自身的FormGroup实例通过@Input传递给子组件，导致子父使用的是完全独立的表单实例，无法同步值
3. 使用(change)事件触发不够可靠，且传递整个表单实例而非具体控件值，增加了不必要的复杂度

修改方案（子父共用表单实例+值监听） #

这种方式让子组件和父组件共享同一个FormGroup，天然实现值同步，同时子组件可以自行处理值变化，也能通知父组件。

子组件修改

HTML代码：

<form [formGroup]="form" autocomplete="off">
  <voxel-likert formControlName="simple">
    O que você achou dessa nova experiência?
  </voxel-likert>
  <!-- 子组件内展示选中值 -->
  <div *ngIf="form.get('simple').value">
    {{ form.get('simple').value | json }}
  </div>
</form>

TS代码：

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

export class MyComponent implements OnInit {
  // 接收父组件传递的表单实例
  @Input() form!: FormGroup;
  // 向外发射simple控件的变化值
  @Output() simpleValueChange = new EventEmitter<any>();

  constructor() {}

  ngOnInit(): void {
    // 监听simple控件的值变化
    this.form.get('simple')?.valueChanges.subscribe(value => {
      // 子组件内处理值的逻辑
      console.log('子组件内获取的simple值:', value);
      // 将值传递给父组件
      this.simpleValueChange.emit(value);
    });
  }
}

父组件修改

HTML代码：

<!-- 将父组件的表单实例传递给子组件 -->
<ui-likert 
  [form]="form"
  (simpleValueChange)="onSimpleValueChange($event)">
</ui-likert>

<!-- 父组件内展示选中值 -->
<div>父组件获取的simple值: {{ form.get('simple').value | json }}</div>

TS代码：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

export class ParentComponent {
  // 父组件的表单实例
  form = new FormGroup({
    simple: new FormControl(''),
  });

  // 接收子组件传递的simple值
  public onSimpleValueChange(value: any) {
    console.log('父组件收到的simple值:', value);
    // 父组件处理值的逻辑
  }
}

方案说明 #

1. 子父共用同一个FormGroup实例，所以无论是子组件还是父组件，都可以直接通过form.get('simple').value获取最新选中值
2. 使用Angular表单的valueChanges监听值变化，比原生(change)事件更精准，能覆盖所有值变更场景
3. 去掉了原代码中破坏表单结构的错误逻辑，保证表单控件的正确性

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