Angular中如何向子组件传递Form表单值并将表单逻辑放在父组件

你要实现的「父组件承载全部表单逻辑、子组件仅做视图渲染」的需求，按照以下规则实现即可：

• 父组件侧需要完成所有逻辑层开发：
  • 初始化表单FormGroup实例，定义所有表单控件、同步/异步验证规则
  • 实现表单提交的触发函数，提交后的校验判断、业务逻辑都在父组件内完成
  • 维护表单提交状态标识，传递给子组件用于错误提示的展示控制
• 子组件侧仅负责UI渲染：
  • 通过@Input()接收父组件传递的表单实例、提交状态两个参数
  • 只编写表单控件的布局、样式、错误提示展示代码，不需要实现任何表单操作逻辑

父组件模板代码示例：

<form [formGroup]="personalInfoForm" (ngSubmit)="onRegister(personalInfoForm)">
  <app-personal-info [personalInfoForm]="personalInfoForm" [submitted]="submitted"></app-personal-info>
</form>

子组件内不需要创建独立的表单实例，直接通过传入的personalInfoForm绑定表单项的formControlName属性即可，所有值变更、验证结果都会自动同步到父组件的表单实例中。

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