Typescript 表单嵌套太深

而不是formArray，我们可以只设置一个formGroup，然后使用addControl方法来添加各个表单值！

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';
  form = this._formBuilder.group({
    services: this._formBuilder.group({}),
  });

  quotation = {
    services: [
      {
        serviceName: 'test',
      },
      {
        serviceName: 'test1',
      },
      {
        serviceName: 'test2',
      },
    ],
  };

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    const servicesFormArray = this.form.get('services') as FormGroup;

    for (let service of this.quotation.services) {
      servicesFormArray.addControl(
        service.serviceName,
        this._formBuilder.control(false)
      );
    }
    console.log(this.form);
  }
}

bootstrapApplication(App);

stackblitz个