Angular 5中获取动态输入框值的问题求助

首先，我看到你已经通过*ngFor结合索引实现了动态输入行的绑定，这是Angular处理动态表单的常规思路，先把你提供的代码片段格式化后方便后续分析：

<div class="row" *ngFor="let field of fieldArray; let i = index">
  <div class="col-sm-2 form-group">
    <label for="grid-input-19">Service Name</label>
    <select class="form-control" 
            name="Service-{{i}}" 
            [(ngModel)]="field.selectedService" 
            #Service="ngModel" 
            (ngModelChange)="onChange($event)">
      <!-- 这里应该是你的option选项列表 -->
    </select>
  </div>
  <!-- 通常还会搭配删除按钮 -->
  <div class="col-sm-1 mt-4">
    <button (click)="removeField(i)" class="btn btn-danger">Remove</button>
  </div>
</div>
<button (click)="addField()" class="btn btn-primary mt-3">Add</button>

对应的组件类基础实现大概是这样：

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html'
})
export class DynamicFormComponent {
  // 存储动态行的数据模型
  fieldArray: { selectedService: string }[] = [];

  // 添加新行
  addField() {
    this.fieldArray.push({ selectedService: '' });
  }

  // 删除指定索引的行
  removeField(index: number) {
    this.fieldArray.splice(index, 1);
  }

  // 处理选择变化事件
  onChange(selectedValue: string) {
    console.log('选中的服务:', selectedValue);
  }
}

常见优化点与问题解决 #

1. 用trackBy提升渲染性能
   当你频繁添加/删除行时，Angular默认会重新渲染所有行，添加trackBy函数可以避免不必要的DOM重绘：

<div class="row" *ngFor="let field of fieldArray; let i = index; trackBy: trackByIndex">

组件类中补充trackBy函数：

trackByIndex(index: number): number {
  return index;
}

2. 解决删除行后的数据绑定错乱
   如果删除中间行后出现绑定异常，大概率是因为依赖索引做了其他关联操作。建议给每个field对象添加唯一标识（比如id），用唯一标识做trackBy或关联逻辑，而不是依赖数组索引：

// 修改fieldArray的结构
fieldArray: { id: string, selectedService: string }[] = [];

addField() {
  this.fieldArray.push({ 
    id: `service-${Date.now()}`, 
    selectedService: '' 
  });
}

// 对应的trackBy函数
trackById(index: number, item: {id: string}): string {
  return item.id;
}

3. onChange事件获取当前行上下文
   如果需要在选择事件中拿到当前行的索引或完整数据，可以修改事件绑定：

(ngModelChange)="onChange($event, i, field)"

组件类中更新处理逻辑：

onChange(selectedValue: string, index: number, field: any) {
  console.log(`第${index+1}行选中服务:`, selectedValue);
  // 直接修改当前行的数据
  field.selectedService = selectedValue;
}

4. 更健壮的响应式表单方案
   如果需要复杂的表单验证或数据提交，推荐使用Angular的FormArray代替ngModel绑定，示例如下：

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

// 组件类中初始化响应式表单
dynamicForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.dynamicForm = this.fb.group({
    serviceFields: this.fb.array([])
  });
}

// 获取FormArray控件
get serviceFields(): FormArray {
  return this.dynamicForm.get('serviceFields') as FormArray;
}

// 添加新的表单控件
addField() {
  this.serviceFields.push(this.fb.group({
    selectedService: ['', Validators.required]
  }));
}

// 删除指定索引的控件
removeField(index: number) {
  this.serviceFields.removeAt(index);
}

模板中改为响应式绑定：

<div class="row" *ngFor="let field of serviceFields.controls; let i = index; trackBy: trackByIndex">
  <div class="col-sm-2 form-group">
    <label for="grid-input-19">Service Name</label>
    <select class="form-control" [formControlName]="i">
      <!-- options -->
    </select>
    <!-- 验证提示 -->
    <div *ngIf="serviceFields.at(i).invalid && (serviceFields.at(i).dirty || serviceFields.at(i).touched)">
      <small class="text-danger">请选择服务</small>
    </div>
  </div>
</div>

如果你遇到了特定的问题（比如数据提交异常、验证失效等），可以补充更多细节，我再针对性帮你排查。

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