在 Angular 中，通过 `@Input()` 传递 `FormGroup` 实例可实现父子组件间表单状态的双向同步；父组件无需依赖 `@Output()` 即可实时获取子组件中用户输入的值，关键在于理解对象引用传递与响应式表单的响应机制。
Angular 的响应式表单（FormGroup、FormControl）本质上是 JavaScript 对象引用。当你通过 @Input() form: FormGroup 将表单实例从父组件传入子组件时，父子组件操作的是同一个对象引用——这意味着子组件中对 form.controls.simple.setValue() 或用户交互触发的值变更，会自动反映在父组件的 form 实例上，无需手动 emit 或重新赋值。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
✅ 正确做法：利用引用传递 + valueChanges 监听
父组件（ParentComponent）
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-parent',
template: `
<app-child-component [form]="form"></app-child-component>
<div class="summary">
<strong>当前表单值：</strong>
<pre>{{ form.value | json }}</pre>
</div>
`,
standalone: true,
imports: [ReactiveFormsModule, ChildComponent]
})
export class ParentComponent implements OnInit {
form!: FormGroup;
ngOnInit(): void {
this.form = new FormGroup({
simple: new FormControl('')
});
// ✅ 推荐：监听值变化，执行业务逻辑（如保存、校验、联动）
this.form.valueChanges.subscribe(value => {
console.log('表单已更新 →', value);
// 例如：触发 API 请求、启用提交按钮、更新其他字段等
});
}
}子组件（ChildComponent）
import { Component, Input } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-child-component',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
<voxel-likert
formControlName="simple"
label="O que você achou dessa nova experiência?"
></voxel-likert>
<!-- 可选：子组件内实时显示当前值 -->
<div *ngIf="form.get('simple')?.value" class="preview">
Selecionado: {{ form.get('simple')?.value | json }}
</div>
</form>
`,
standalone: true,
imports: [ReactiveFormsModule]
})
export class ChildComponent {
@Input() form!: FormGroup;
onSubmit() {
if (this.form.valid) {
console.log('子组件提交表单：', this.form.value);
// 可在此触发子组件专属逻辑（如本地验证、格式化）
}
}
}⚠️ 原代码问题分析与修正建议
- ❌ 错误使用 @Output() 发送整个 FormGroup：this.responseEvent.emit(this.form) 多余且低效；父组件已持有该引用，无需重复传递。
- ❌ onChangeEvent 中误调用 addControl：this.form.addControl('simple', ...) 会破坏原有结构，导致运行时错误（simple 已存在），应删除。
- ❌ 模板中 formGroup="form" 写法错误：必须使用方括号绑定 [formGroup]="form"，否则 Angular 无法识别为表达式。
- ✅ valueChanges 是响应式监听的黄金标准：比 (change) 事件更可靠（支持所有控件类型，包括自定义控件如 voxel-likert）。
? 进阶提示
- 若需子组件独立控制部分逻辑但不干扰父表单（如临时缓存、预填充），可使用 form.get('simple')?.valueChanges 在子组件内部订阅。
- 如需父子组件完全解耦（例如子组件封装为第三方库），再考虑 @Output() + EventEmitter<{ field: string; value: any }> 的细粒度通信，但本场景不必要。
- 所有 FormControlName 必须位于 formGroup 上下文中，确保 voxel-likert 是兼容 ControlValueAccessor 的自定义表单控件（否则需检查其是否正确实现了 writeValue/registerOnChange）。
通过引用共享 + valueChanges 订阅，你获得的是轻量、高效、符合 Angular 响应式哲学的表单协同方案——简洁、健壮、易于维护。
