angular 中父子组件可通过 `@input()` 传递 `formgroup` 引用实现双向数据同步，无需 `@output()` 事件；子组件修改表单值会自动反映到父组件，父组件可监听 `valuechanges` 实时响应。
在 Angular 响应式表单开发中，常见场景是将表单逻辑封装在子组件中（如自定义评分控件
✅ 正确实践：基于引用共享，避免冗余事件
父组件（ParentComponent）
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-parent',
template: `
<h3>父组件</h3>
<app-child-component [form]="form"></app-child-component>
<div class="preview">
<strong>当前表单值：</strong>
<pre class="brush:php;toolbar:false;">{{ form.value | json }}
`,
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('[Parent] 表单值已更新:', value);
// 例如：触发 API 请求、启用提交按钮、更新其他字段...
});
}
}子组件（ChildComponent）
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-child-component',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()" autocomplete="off">
<label>请选择评分：</label>
<voxel-likert
formControlName="simple"
placeholder="O que você achou dessa nova experiência?">
</voxel-likert>
<!-- 可选：子组件内实时显示当前值 -->
<div *ngIf="form.get('simple')?.value" class="value-preview">
您选择了：<strong>{{ form.get('simple')?.value }}</strong>
</div>
</form>
`,
standalone: true,
imports: [ReactiveFormsModule]
})
export class ChildComponent {
@Input() form!: FormGroup;
// ✅ 无需 @Output() 和手动 emit —— 引用已共享
// ✅ 不要在 onChangeEvent 中重复 addControl（这会导致错误：试图向已存在控件的 FormGroup 添加同名控件）
onSubmit() {
if (this.form.valid) {
console.log('[Child] 提交数据:', this.form.value);
// 可在此调用子组件专属逻辑（如格式化、本地验证）
}
}
}⚠️ 原代码问题解析与修正要点
| 问题点 | 错误原因 | 修正方案 |
|---|---|---|
| this.form.addControl('simple', ...) 在 onChangeEvent 中 | simple 控件已在初始化时创建，重复 addControl 会抛出 Cannot add control with name 'simple' 错误 | 彻底移除该行；控件结构应在 FormGroup 初始化时定义完成 |
| @Output() responseEvent + emit(this.form) | 过度设计：父组件本就持有该 FormGroup 实例，无需再通过事件“回传”自身引用 | 删除 @Output 相关代码，专注利用引用一致性 |
| (change) 事件绑定在 | change 对 FormControl 并非最佳监听方式；响应式表单应优先使用 valueChanges 或 statusChanges | 移除冗余 (change) 绑定，改用 form.valueChanges（父组件）或 form.get('simple')?.valueChanges（子组件内细粒度监听） |
? 进阶建议
-
子组件内精细监听：若需在子组件中单独响应某个控件变化：
ngOnInit() { this.form.get('simple')?.valueChanges.subscribe(val => { console.log('simple 字段变化:', val); // 执行子组件特有逻辑（如动态提示、禁用关联字段） }); } -
防止意外覆盖：若父组件需确保表单结构不可变，可在 @Input() setter 中做防御性检查：
private _form!: FormGroup; @Input() set form(value: FormGroup) { if (!value || !(value instanceof FormGroup)) { throw new Error('必须传入有效的 FormGroup'); } this._form = value; } get form(): FormGroup { return this._form; }
通过引用共享表单实例，既保持了组件职责分离（子组件专注 UI 交互，父组件专注业务流），又实现了零成本的数据同步，是 Angular 响应式表单的最佳实践之一。
