Angular响应式表单：FormArray绑定含ID对象适配自定义组件

我有一个包含FormArray（tipsAndTricks字段）的Angular响应式表单：

updatePoiForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(75)]],
    tipsAndTricks: this.fb.array([this.fb.control('', [Validators.minLength(25), Validators.maxLength(2000)])]),
  }, { updateOn: 'submit' }
)

在ngOnInit中，我为tipsAndTricks数组添加默认值：

ngOnInit() {
  ...
  formValues?.tipsAndTricks?.forEach((tipAndTrick) => {
    this.tipsAndTricks.push(this.fb.control(tipAndTrick.id, [Validators.required, Validators.minLength(25), Validators.maxLength(2000)]))
  })
  ...
}

模板中使用自定义textarea控件：

<div class="container__all-fields" formArrayName="tipsAndTricks">
  <div class="container__field" *ngFor="let tipAndTrick of tipsAndTricks.controls; let i = index; let last = last">
    <custom-textarea [formControlName]="i"></custom-textarea>
  </div>
</div>

tipAndTrick的类型定义如下：

export interface tipsAndTricksResponse {
  id: string
  tip: string
}

目前我仅将tip字段传给custom-textarea，该组件仅接收和输出字符串。但提交表单时，我希望同时发送tip和id。

请问：能否在已绑定formControlName的FormArray控件中绑定含ID的对象，使组件仅处理tip，而表单控件保留tipsAndTricksResponse结构？

完全可以实现，以下是两种实用方案：

方案一：将FormArray项替换为FormGroup（推荐） #

把FormArray里的单个FormControl改成包含id和tip的FormGroup，这样表单值天然符合tipsAndTricksResponse结构，同时让自定义textarea绑定tip字段：

1. 修改表单初始化代码

updatePoiForm = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(75)]],
    tipsAndTricks: this.fb.array([
      // 初始项改为FormGroup，包含id（无需编辑）和tip（绑定到textarea）
      this.fb.group({
        id: [''],
        tip: ['', [Validators.minLength(25), Validators.maxLength(2000)]]
      })
    ]),
  }, { updateOn: 'submit' }
)

2. 更新默认值填充逻辑

ngOnInit() {
  ...
  // 先清空初始空项（按需选择）
  this.tipsAndTricks.clear();
  formValues?.tipsAndTricks?.forEach((tipAndTrick) => {
    this.tipsAndTricks.push(this.fb.group({
      id: [tipAndTrick.id], // 保留原始id，无需验证
      tip: [tipAndTrick.tip, [Validators.required, Validators.minLength(25), Validators.maxLength(2000)]]
    }))
  })
  ...
}

3. 调整模板绑定

<div class="container__all-fields" formArrayName="tipsAndTricks">
  <div class="container__field" *ngFor="let tipGroup of tipsAndTricks.controls; let i = index" [formGroupName]="i">
    <!-- 绑定到FormGroup中的tip控件 -->
    <custom-textarea formControlName="tip"></custom-textarea>
    <!-- 用隐藏input存储id，确保提交时携带该字段 -->
    <input type="hidden" formControlName="id">
  </div>
</div>

提交表单时，updatePoiForm.value.tipsAndTricks直接就是tipsAndTricksResponse[]类型，包含每个项的id和tip，自定义textarea只需处理字符串类型的tip即可。

方案二：给自定义textarea实现ControlValueAccessor #

如果不想修改FormArray结构，可以给custom-textarea组件实现自定义值存取器，让它能接收tipsAndTricksResponse对象，只处理tip字段，同时将完整对象同步回表单：

1. 修改自定义textarea组件

import { Component, forwardRef, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { tipsAndTricksResponse } from './path-to-your-interface';

@Component({
  selector: 'custom-textarea',
  templateUrl: './custom-textarea.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomTextareaComponent),
      multi: true
    }
  ]
})
export class CustomTextareaComponent implements ControlValueAccessor {
  @Input() tipId!: string;
  tipContent = '';
  private onChange: (value: tipsAndTricksResponse) => void = () => {};
  private onTouched: () => void = () => {};

  // 接收表单传来的完整对象，提取tip显示
  writeValue(obj: tipsAndTricksResponse): void {
    if (obj) {
      this.tipContent = obj.tip;
      this.tipId = obj.id;
    }
  }

  // 注册表单值变化回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 注册表单触摸回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 输入变化时，构造完整对象同步回表单
  onInputChange(event: Event): void {
    const inputVal = (event.target as HTMLTextAreaElement).value;
    this.onChange({ id: this.tipId, tip: inputVal });
    this.onTouched();
  }
}

2. 自定义组件模板

<textarea [(ngModel)]="tipContent" (input)="onInputChange($event)"></textarea>

3. 父组件模板调整

<div class="container__all-fields" formArrayName="tipsAndTricks">
  <div class="container__field" *ngFor="let tipCtrl of tipsAndTricks.controls; let i = index">
    <custom-textarea [formControlName]="i"></custom-textarea>
  </div>
</div>

4. 父组件初始化FormArray

ngOnInit() {
  ...
  this.tipsAndTricks.clear();
  formValues?.tipsAndTricks?.forEach((tipAndTrick) => {
    // 直接存入完整的tipsAndTricksResponse对象
    this.tipsAndTricks.push(this.fb.control(tipAndTrick, [Validators.required, Validators.minLength(25), Validators.maxLength(2000)]))
  })
  ...
}

这种方案下，表单控件始终存储完整的tipsAndTricksResponse对象，自定义组件只负责tip的编辑和显示。

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