角度反应式:如何预设值？(包含对象的FormArray)

基础概念

角度反应式（Angular Reactive Forms）是Angular框架中用于处理表单的一种方式。它通过使用FormControl、FormGroup和FormArray来创建和管理表单数据。FormArray是一种特殊的FormGroup，它允许你动态地添加和删除表单项。

预设值

预设值是指在创建表单时，预先设置表单控件的初始值。对于包含对象的FormArray，可以通过以下步骤来预设值：

创建表单模型：使用FormBuilder或手动创建FormGroup和FormArray。
设置初始值：在创建表单模型时，设置FormArray的初始值。

示例代码

以下是一个包含对象的FormArray的示例代码，展示了如何预设值：

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

interface Address {
  street: string;
  city: string;
  zip: string;
}

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

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.form = this.fb.group({
      addresses: this.fb.array([
        this.fb.group({
          street: ['123 Main St', Validators.required],
          city: ['Anytown', Validators.required],
          zip: ['12345', Validators.required]
        })
      ])
    });
  }

  get addresses() {
    return this.form.get('addresses') as FormArray;
  }

  addAddress() {
    const addressGroup = this.fb.group({
      street: ['', Validators.required],
      city: ['', Validators.required],
      zip: ['', Validators.required]
    });
    this.addresses.push(addressGroup);
  }

  removeAddress(index: number) {
    this.addresses.removeAt(index);
  }
}

应用场景

预设值的应用场景包括但不限于：

表单初始化：在组件初始化时，预先设置表单的初始值。
数据回显：从服务器获取数据后，将数据回显到表单中。
默认配置：为用户提供一些默认的配置选项。

常见问题及解决方法

问题：为什么预设值没有生效？

原因：

表单模型未正确创建：确保表单模型已经正确创建，并且FormArray已经正确初始化。
数据结构不匹配：确保预设值的数据结构与表单模型的数据结构匹配。

解决方法：

检查表单模型的创建过程，确保FormArray已经正确初始化。
确保预设值的数据结构与表单模型的数据结构一致。

问题：如何动态添加和删除表单项？

解决方法：使用FormArray的push方法添加新的表单项，使用removeAt方法删除指定索引的表单项。

addAddress() {
  const addressGroup = this.fb.group({
    street: ['', Validators.required],
    city: ['', Validators.required],
    zip: ['', Validators.required]
  });
  this.addresses.push(addressGroup);
}

removeAddress(index: number) {
  this.addresses.removeAt(index);
}