如何在没有初始值设定项的formGroup中设置子formGroup？

在没有初始值设定项的 FormGroup 中设置子 FormGroup 可以通过以下步骤实现：

基础概念

FormGroup 是 Angular 表单中的一个重要概念，用于将表单控件组织成一个逻辑组。子 FormGroup 则是嵌套在父 FormGroup 中的另一个 FormGroup，用于进一步组织和管理表单控件。

类型

静态 FormGroup：在组件初始化时定义的 FormGroup。
动态 FormGroup：在运行时根据条件动态创建的 FormGroup。

应用场景

复杂表单：当表单包含多个部分，每个部分有独立的验证逻辑时。
动态表单：当表单的结构需要根据用户输入或其他条件动态变化时。

示例代码

以下是一个在没有初始值设定项的 FormGroup 中设置子 FormGroup 的示例：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      // 父 FormGroup
      parentControl: ['', Validators.required],
      childGroup: this.fb.group({
        // 子 FormGroup
        childControl1: ['', Validators.required],
        childControl2: ['', Validators.minLength(3)]
      })
    });
  }

  onSubmit(): void {
    if (this.form.valid) {
      console.log(this.form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

HTML 模板

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="parentControl">Parent Control:</label>
    <input id="parentControl" formControlName="parentControl">
  </div>
  <div formGroupName="childGroup">
    <div>
      <label for="childControl1">Child Control 1:</label>
      <input id="childControl1" formControlName="childControl1">
    </div>
    <div>
      <label for="childControl2">Child Control 2:</label>
      <input id="childControl2" formControlName="childControl2">
    </div>
  </div>
  <button type="submit">Submit</button>
</form>