Angular 11 如何初始化子组件的FormGroup表单值？

首先你当前的代码存在类型不匹配问题：子组件中childform声明为FormGroup类型，但父组件传入的是普通JSON格式的element对象，直接绑定会引发类型错误，推荐按以下两种方案修改：

方案1：使用@Input setter监听传入值（最简洁） #

修改子组件代码，将childform输入参数改为带setter的形式，接收父组件传入的element后自动填充表单：

// 内部维护实际的FormGroup实例
private _childform = new FormGroup({
  code: new FormControl('', [Validators.required, Validators.pattern('[0-9]+')]),
  countryCode: new FormControl('', Validators.required),
  // 其余表单控件
});

@Input()
set childform(element: Record<string, any>) {
  // 传入值非空时批量填充表单
  if (element) {
    // patchValue只会匹配FormGroup中已存在的控件，忽略多余字段不会报错
    this._childform.patchValue(element);
  }
}

// 对外暴露FormGroup实例供模板绑定使用
get childform() {
  return this._childform;
}

父组件的HTML代码无需修改，保持原有绑定即可。

方案2：使用ngOnChanges生命周期监听（适合多输入参数场景） #

更符合语义的写法是将「表单实例」和「初始化数据」作为两个独立的输入参数拆分，避免类型混淆：

1. 首先修改父组件HTML绑定逻辑：

<div class="modal-body">
  <!-- 单独传初始化数据element，不要直接绑到childform上 -->
  <app-addchild [element]="element"></app-addchild>
</div>

2. 子组件通过ngOnChanges监听数据变化并填充表单：

import { OnChanges, SimpleChanges } from '@angular/core';

export class AddchildComponent implements OnChanges {
  public childform = new FormGroup({
    code: new FormControl('', [Validators.required, Validators.pattern('[0-9]+')]),
    countryCode: new FormControl('', Validators.required),
    // 其余表单控件
  });

  // 单独定义输入参数接收父组件传入的初始化数据
  @Input() public element: Record<string, any>;

  ngOnChanges(changes: SimpleChanges) {
    // 当element输入值发生变化且非空时填充表单
    if (changes['element'] && this.element) {
      this.childform.patchValue(this.element);
    }
  }
}

注意事项 #

• 如果父组件的element是异步获取（比如从接口请求返回），可以在父组件给子组件加*ngIf="element"判断，等数据就绪后再渲染子组件，避免空值报错
• 如果表单包含嵌套FormGroup/FormArray，只要element的结构和FormGroup结构完全对应，patchValue也支持嵌套赋值
• 如果需要严格校验传入数据必须包含所有表单字段，可以把patchValue替换为setValue，字段缺失时会主动抛出异常方便排查问题

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