Angular输入控件正确数据绑定方式及Y轴值全变首值问题求解

你的赋值异常问题由以下3个核心错误导致：

• 同时混用两种表单绑定方式：同时使用了模板驱动表单的[(ngModel)]和响应式表单的formControlName，两种绑定逻辑冲突会导致值同步异常。
• 动态行共用了同一个表单控件：*ngFor循环生成的所有行的输入框，都绑定了FormGroup中同一个rowxAxis、rowyAxis控件实例，任意行的输入都会同步修改所有行的取值，提交后所有值统一被覆盖为第一个条目的值就是这个原因。
• name属性绑定逻辑错误：你将name属性绑定为当前输入框的取值{{row.xAxis}}，值变化时name属性也会同步变化，会触发Angular表单重新匹配绑定，进一步加剧值覆盖的问题。

Angular表单仅需选择「模板驱动表单」或「响应式表单」其中一种即可，不要混用，以下是两种场景的修复方案：

方案1：仅使用模板驱动表单（适合新手、简单表单场景） #

直接移除所有formControlName属性，修改name属性为固定前缀+索引的格式保证每行name唯一即可：

<div class="form-group"  >
    <table class="table border">
        <tbody>
            <tr *ngFor="let row of chartData ; let i = index;">
             <td><input class="form-control" [(ngModel)]="chartData[i].xAxis" name="rowxAxis_{{i}}" placeholder="X axis Value" /></td>
             <td><input class="form-control" [(ngModel)]="chartData[i].yAxis" name="rowyAxis_{{i}}" placeholder="Y axis Value" /></td>
            </tr>
        </tbody>
    </table>
</div>

对应可以删除ngOnInit中chartForm里定义的rowxAxis、rowyAxis两个控件，直接读取chartData就能拿到所有行的输入值。

方案2：仅使用响应式表单（推荐中复杂场景，支持动态增删行、表单校验） #

需要用FormArray来动态管理每行的表单控件：

第一步修改TS代码 #

async ngOnInit() {
    this.onLoadConfigInformation();
    this.chartForm = new FormGroup({
      xAxisHeader: new FormControl(),
      yAxisHeader: new FormControl(),
      // 用FormArray存储动态行数据，默认初始化1行
      chartRows: this.fb.array([
        this.createRow()
      ])
   });
   this.fileUpload = new FormGroup({
    folderName: new FormControl()
 });
}

// 新增：创建单行表单控件的工具方法
createRow(): FormGroup {
  return this.fb.group({
    xAxis: [''],
    yAxis: [0]
  })
}

// 新增：方便快速获取FormArray的getter
get chartRows(): FormArray {
  return this.chartForm.get('chartRows') as FormArray;
}

// 修改createChart取值逻辑
createChart(){
    this.chartData = this.chartRows.value.map(row => ({
      ...row,
      yAxis: Number(row.yAxis)
    }))
    this.chartDataSource = this.chartData;
    alert(JSON.stringify(this.chartData));
}

第二步修改HTML代码 #

移除ngModel，绑定FormArray对应控件即可：

<div class="form-group" [formGroup]="chartForm">
    <table class="table border" formArrayName="chartRows">
        <tbody>
            <tr *ngFor="let row of chartRows.controls ; let i = index;" [formGroupName]="i">
             <td><input class="form-control" formControlName="xAxis" placeholder="X axis Value" /></td>
             <td><input class="form-control" formControlName="yAxis" placeholder="Y axis Value" /></td>
            </tr>
        </tbody>
    </table>
</div>

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