Angular响应式表单：为*ngFor循环的回复列表设置默认值

看起来你遇到的核心问题是单个响应式表单被多个循环项复用，导致无法为每个回复单独设置默认值，而且Angular响应式表单本身会忽略HTML中的value属性，所以你之前通过HTML设置的默认值会被TS里初始化的空值覆盖。下面给你一个清晰的解决方案：

问题根源 #

你当前用的是单个feedbackForm，但在*ngFor循环里每个回复都绑定同一个表单控件，这会导致所有回复共享同一个表单状态，默认值也无法分别设置。而且Angular响应式表单的控件值完全由TS代码控制，HTML里的value属性不会生效——这就是为什么你提交默认值时返回空字符串的原因。

正确解决方案：使用FormArray管理多个独立表单 #

我们可以用FormArray来为每个回复创建独立的FormGroup，这样每个回复的评分表单都是独立的，能单独设置默认值和提交数据。

1. 修改TypeScript代码 #

首先引入FormArray，然后初始化一个包含所有回复表单的数组：

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

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit {
  public replies: any[];
  public feedbackFormArray: FormArray;

  constructor(private _formBuilder: FormBuilder) {}

  public ngOnInit() {
    // 初始化回复数据
    this.replies = [{
      "_id": "dkjldajl",
      "user": "Person 1",
      "title": "Person 1's Reply",
      "content": "The content that Person 1 wrote.",
      "grade": 0
    }, {
      "_id": "danlkanl",
      "user": "Person 2",
      "title": "Person 2's Reply",
      "content": "The content that Person 2 wrote.",
      "grade": 0
    }];

    // 用FormArray为每个回复创建独立的FormGroup，并设置默认值
    this.feedbackFormArray = this._formBuilder.array(
      this.replies.map(reply => 
        this._formBuilder.group({
          id: [reply._id, Validators.required], // 默认值设为reply的_id
          grade: [reply.grade, Validators.required] // 默认值设为reply的grade
        })
      )
    );
  }

  // 获取指定索引的FormGroup
  getFeedbackForm(index: number): FormGroup {
    return this.feedbackFormArray.at(index) as FormGroup;
  }

  // 提交单个回复的评分
  submitFeedback(index: number) {
    const currentForm = this.getFeedbackForm(index);
    if (currentForm.valid) {
      console.log('提交的评分数据:', currentForm.value);
      // 这里可以调用你的API提交逻辑，比如 this.apiService.submitGrade(currentForm.value)
    }
  }
}

2. 修改HTML模板 #

在循环中绑定对应索引的FormGroup，移除无效的value属性：

<mat-card *ngFor="let reply of replies; let i = index">
  <mat-card-title> {{reply.title}} {{reply.user}} </mat-card-title>
  <mat-card-content> {{reply.content}} </mat-card-content>
  <mat-card-actions>
    <!-- 绑定当前索引对应的FormGroup -->
    <form [formGroup]="getFeedbackForm(i)">
      <div class="form-group">
        <input matInput formControlName="id" placeholder="id" type="hidden">
      </div>
      <div class="form-group">
        <input matInput formControlName="grade" placeholder="Enter Grade" type="number">
      </div>
      <div>
        <button type="submit" (click)="submitFeedback(i)" [disabled]="!getFeedbackForm(i).valid">Submit</button>
      </div>
    </form>
  </mat-card-actions>
</mat-card>

关键说明 #

• FormArray的作用：它允许我们管理一组独立的FormGroup，每个回复对应一个，这样每个表单的状态和值都是独立的，不会互相干扰。
• 默认值设置：在初始化FormGroup时，我们直接把reply._id和reply.grade作为控件的初始值，这是Angular响应式表单设置默认值的正确方式，完全替代了HTML中的value属性。
• 独立提交：点击每个回复的提交按钮时，只会处理当前回复对应的表单数据，避免了数据混淆。

这样修改后，每个回复的评分输入框会默认显示reply.grade的值，提交时也能正确获取到当前回复的id和修改后的grade。

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