Angular响应式表单+信号服务：填充表单数组遇NG01000错误求解

你遇到的错误核心原因是：尝试在空的FormArray上调用setValue。FormArray需要先有对应数量的表单控件，才能接收数据赋值。结合Angular信号的特性，以下是最优实现方案：

1. 修正PlansService的HTTP调用逻辑 #

将HTTP请求从构造函数移至独立方法，确保信号能正确响应异步数据：

import { Injectable, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CarrierFilterOption } from './your-interface-path';

@Injectable({ providedIn: 'root' })
export class PlansService {
    public filterOptions = signal<CarrierFilterOption[]>([]);
    
    constructor(private http: HttpClient) {}

    // 封装HTTP请求方法
    loadFilterOptions(): void {
        this.http.get<CarrierFilterOption[]>('/api/your-filter-endpoint')
            .subscribe({
                next: (data) => this.filterOptions.set(data),
                error: (err) => {
                    console.error('加载筛选选项失败:', err);
                    this.filterOptions.set([]); // 错误时设置空数组避免异常
                }
            });
    }
}

2. 组件中响应式表单的正确实现 #

通过effect监听信号变化，动态构建FormArray的表单控件：

import { Component, effect, inject } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { PlansService } from './plans.service';
import { CarrierFilterOption } from './your-interface-path';

@Component({
  selector: 'app-plan-list',
  templateUrl: './plan-list.component.html'
})
export class PlanListComponent {
  private plansService = inject(PlansService);
  private formBuilder = inject(FormBuilder);

  planListForm = this.formBuilder.group({
    carrierFilterOptions: this.formBuilder.array<FormGroup>([])
  });

  constructor() {
    // 监听filterOptions信号变化，自动更新表单
    effect(() => {
      const options = this.plansService.filterOptions();
      const carrierArray = this.carrierFilterOptions;

      // 清空现有控件避免重复
      carrierArray.clear();

      // 为每个选项创建对应的FormGroup
      options.forEach(option => {
        carrierArray.push(this.createFilterGroup(option));
      });
    });

    // 初始化加载数据
    this.plansService.loadFilterOptions();
  }

  // 快捷获取FormArray
  get carrierFilterOptions(): FormArray {
    return this.planListForm.get('carrierFilterOptions') as FormArray;
  }

  // 创建单个筛选选项的FormGroup
  private createFilterGroup(option: CarrierFilterOption): FormGroup {
    return this.formBuilder.group({
      label: [option.label, { disabled: true }], // 标签为静态展示，禁用编辑
      isChecked: [option.isChecked]
    });
  }
}

3. 模板渲染示例 #

在组件模板中循环渲染FormArray的控件：

<form [formGroup]="planListForm">
  <div formArrayName="carrierFilterOptions">
    <div *ngFor="let group of carrierFilterOptions.controls; let i = index" 
         [formGroupName]="i">
      <label>
        <input type="checkbox" formControlName="isChecked">
        {{ group.get('label')?.value }}
      </label>
    </div>
  </div>
</form>

关于信号的适用性 #

信号完全适合这个场景。信号的响应式特性可以自动追踪数据变化，配合effect能简洁地处理表单更新这类副作用，比传统的Observable订阅更省心（无需手动管理订阅销毁）。

原错误的本质是表单操作逻辑问题，与信号无关——只要确保在赋值前先构建好对应的表单控件即可。

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