无法在表单级别fieldset内使用字段值的技术问题求助

问题背景 #

在Angular项目的app.component.html中使用了基于FormArray的动态表单，尝试在表单提交的onSend()函数中传入#mod.value和#token.value作为参数，但这两个模板引用变量无法被识别，而外部的#content.value可以正常使用，部分字段使用了自定义组件库。

核心原因分析 #

1. 模板变量的作用域限制 #

#mod和#token定义在*ngFor循环内部，而*ngFor会为每个循环项创建独立的子作用域。表单的(ngSubmit)事件绑定在循环外部的<form>标签上，属于父作用域，无法直接访问子作用域中的模板变量——因为循环会生成多个#mod和#token，父作用域无法确定要引用哪一个实例的值。

2. 未与Reactive Form绑定（最佳实践缺失） #

项目已经使用了Angular Reactive Form（FormGroup+FormArray），但<select>和自定义input-field组件并没有绑定对应的formControlName。这种情况下，模板变量的取值方式不仅不符合Reactive Form的设计逻辑，还会导致动态生成的表单项值无法统一管理。

3. 自定义组件的属性暴露问题 #

如果input-field是自定义组件，默认情况下不会向外暴露value属性。直接通过#token.value取值会失败，需要自定义组件实现ControlValueAccessor接口，或者显式通过@Input()暴露值属性。

解决方案 #

方案一：利用Reactive Form获取表单值（推荐） #

直接从FormArray中读取所有动态表单项的值，无需依赖模板变量，这是Angular Reactive Form的标准用法。

步骤1：绑定表单控件到FormGroup

修改HTML中的表单控件，添加formControlName与FormArray中的字段对应：

<!-- 绑定select到formControlName="model" -->
<select
  class="col-md-10"
  label="Model"
  formControlName="model"
  value="text-davinci-001"
  options='[{"name": "001", "value": "001"},{"name": "002", "value":"002"}]'
  datamissing="Please check one option."
  required
>
</select>

<!-- 绑定自定义input-field到formControlName="maxtoken" -->
<input-field
  class="col-md-10"
  label="Max Tokens"
  placeholder="500"
  formControlName="maxtoken"
  readonly
>
</input-field>

注意：自定义input-field组件需要支持formControlName，即实现ControlValueAccessor接口，否则无法与Reactive Form绑定。

步骤2：修改onSend方法从FormArray取值

onSend(): void {
  this.sendResponse = '';
  let auth_token = "";
  
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': `${auth_token}`
  });

  // 从FormArray中获取所有模型的完整数据
  const modelsData = (this.myForm.get('models') as FormArray).value;
  
  // 根据API需求组装请求数据
  const data = {
    // 如果需要原content值，确保content是表单中的一个formControl
    // message: this.myForm.get('content')?.value,
    models: modelsData
  };

  const requestOptions = { headers: headers };

  this.httpClient.post(this.sendURL, data, requestOptions).subscribe(res => {
    const response = JSON.parse(JSON.stringify(res, null, 2));
    this.sendResponse = response.message;
  });
}

同时修改HTML中的提交事件，无需传模板变量：

<form [formGroup]="myForm" (ngSubmit)="onSend()" #f="ngForm">

方案二：通过ViewChildren获取模板变量值（不推荐） #

如果必须使用模板变量，可以通过@ViewChildren获取所有循环生成的模板变量实例：

步骤1：在组件中定义ViewChildren

import { ViewChildren, QueryList, ElementRef } from '@angular/core';

// ...

@ViewChildren('mod') modElements: QueryList<ElementRef>;
@ViewChildren('token') tokenElements: QueryList<ElementRef>;

步骤2：在onSend中读取所有值

onSend(): void {
  this.sendResponse = '';
  let auth_token = "";
  
  const headers = new HttpHeaders({
    'Content-Type': 'application/json',
    'Authorization': `${auth_token}`
  });

  // 获取所有mod和token的值
  const modValues = this.modElements.map(el => el.nativeElement.value);
  const tokenValues = this.tokenElements.map(el => el.nativeElement.value);
  
  // 组装请求数据，根据需求调整结构
  const data = {
    message: '',
    models: modValues.map((model, index) => ({
      model: model,
      maxtoken: tokenValues[index]
    }))
  };

  const requestOptions = { headers: headers };

  this.httpClient.post(this.sendURL, data, requestOptions).subscribe(res => {
    const response = JSON.parse(JSON.stringify(res, null, 2));
    this.sendResponse = response.message;
  });
}

提示：这种方式仅适用于简单场景，自定义组件需要确保nativeElement能正确读取value，否则会出现取值失败的情况。

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