Angular 17+中如何通过Signals Input传递FormGroup输入值？

典型错误排查 #

首先确认是否犯了这个常见错误：使用input()函数时额外添加了@Input()装饰器。新的信号输入语法不需要搭配@Input()，否则会导致属性注册冲突，直接移除@Input()即可。

分场景正确实现 #

场景1：父组件传递普通FormGroup实例

子组件直接用input()接收FormGroup，可设置默认表单作为 fallback：

@Component({
  selector: 'app-user-data-create-update',
  standalone: true,
  imports: [ReactiveFormsModule, PanelModule, NgStyle],
  templateUrl: './user-data-create-update.component.html',
  styleUrl: './user-data-create-update.component.scss',
})
export class UserDataCreateUpdateComponent {
  private readonly formBuilder = inject(FormBuilder);

  // 信号输入：接收FormGroup，带默认表单结构
  form = input<FormGroup<any>>(
    this.formBuilder.group({
      createdDateTime: [''],
      creatorXID: [''],
      creatorPersonXID: [''],
      creatorPersonEmail: [''],
      updatedDateTime: [''],
      updaterXID: [''],
      updaterPersonXID: [''],
      updaterPersonEmail: [''],
    })
  );
  fontSize = input<string>('0.8rem');
}

父组件调用方式不变：

<app-user-data-create-update [form]="formGroupProgram"/>

子组件中访问表单实例用this.form()即可。

场景2：父组件传递Signal

有两种处理方式：

1. 父模板解包传递：在父组件模板中调用Signal的()取值，子组件按场景1的方式接收：

   <!-- 父组件模板 -->
   <app-user-data-create-update [form]="formGroupProgram()"/>
   

   子组件代码同场景1。

2. 子组件直接接收Signal类型：如果需要保留Signal的响应式特性，子组件可直接接收Signal，再用computed解包：

   // 子组件代码
   export class UserDataCreateUpdateComponent {
     private readonly formBuilder = inject(FormBuilder);
   
     // 接收Signal<FormGroup>类型输入
     form = input.required<Signal<FormGroup<any>>>();
     fontSize = input<string>('0.8rem');
   
     // 解包获取FormGroup实例
     currentForm = computed(() => this.form()());
   }
   

   父组件调用方式不变：

   <app-user-data-create-update [form]="formGroupProgram"/>
   

关键注意事项 #

• 用input()定义的信号输入是只读Signal，不能在constructor中直接赋值（比如this.form = signal(...)），初始值要通过input()的参数设置。
• 如果表单是必填项，用input.required<T>()替代input<T>(默认值)，强制父组件传递值。

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