在 Angular 中，通过 `@Input()` 传递 `FormGroup` 实例（而非副本）可实现父子组件间表单状态的实时同步；父组件可直接监听 `valueChanges` 获取用户输入，无需依赖 `@Output()` 事件。
Angular 的响应式表单（FormGroup、FormControl）本质上是引用类型对象。当父组件将一个 FormGroup 实例通过 @Input() 传给子组件时，子组件操作的是同一内存地址的对象——这意味着任何对 form.controls.xxx.setValue()、用户交互触发的值变更，都会立即反映在父组件持有的表单实例上。
✅ 正确做法：利用引用一致性 + valueChanges
父组件（ParentComponent） 应负责创建和持有表单，并主动监听变化：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-parent',
template: `
<h3>父组件</h3>
<p>当前表单值：<code>{{ form.value | json }}</code></p>
<app-child-component [form]="form"></app-child-component>
`,
})
export class ParentComponent implements OnInit {
form!: FormGroup;
ngOnInit(): void {
this.form = new FormGroup({
simple: new FormControl('', Validators.required),
});
// ✅ 推荐：订阅 valueChanges，响应所有字段变更
this.form.valueChanges.subscribe(value => {
console.log('表单整体值已更新:', value);
// ? 在此处执行提交校验、保存草稿、联动其他逻辑等
});
// ✅ 可选：监听单个控件变化
this.form.get('simple')?.valueChanges.subscribe(val => {
console.log('simple 字段新值:', val);
});
}
}子组件（ChildComponent） 仅需接收并绑定表单，无需 @Output 或手动 emit：
// child.component.ts
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-child-component',
template: `
<div *ngIf="form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<label>您的评价：</label>
<voxel-likert formControlName="simple">您觉得这次体验如何？</voxel-likert>
<!-- 可选：显示当前值（调试用） -->
<div *ngIf="form.get('simple')?.value">
当前选择：<strong>{{ form.get('simple')?.value | json }}</strong>
</div>
</form>
</div>
`,
})
export class ChildComponent {
@Input() form!: FormGroup;
onSubmit() {
if (this.form.valid) {
console.log('子组件内提交：', this.form.value);
// 注意：此处提交逻辑通常仍由父组件统一处理，子组件只负责 UI 和验证
}
}
}⚠️ 原代码问题分析与修正建议
- ❌ 错误使用 @Output() 发送整个 FormGroup：this.responseEvent.emit(this.form) 是冗余的，父组件本就持有该引用。
- ❌ onChangeEvent 中误调 addControl：this.form.addControl('simple', ...) 会破坏原有结构，导致运行时错误（simple 已存在）。
- ❌ 模板中 (change) 绑定无效：<voxel-likert> 是自定义控件，其内部应通过 ControlValueAccessor 正确对接 FormControl；外部 change 事件不可靠，应依赖 valueChanges。
✅ 最佳实践总结
| 场景 | 推荐方式 |
|---|---|
| 父组件获取表单最新值 | 订阅 form.valueChanges（推荐）或直接访问 form.value |
| 子组件响应用户操作 | 保证 <voxel-likert> 正确实现 ControlValueAccessor，自动同步值 |
| 表单初始化与验证逻辑 | 全部放在父组件，子组件专注渲染与交互 |
| 避免性能陷阱 | valueChanges 默认使用 distinctUntilChanged()，无需额外防抖（如需节流可配合 debounceTime） |
这样设计不仅简洁可靠，还符合 Angular 响应式编程范式——数据流单向（父 → 子），状态唯一可信源（parent's FormGroup），大幅降低维护复杂度。
