Angular 5动态添加输入框并提交多数据至服务器问题求助

看起来你在实现动态添加输入框的响应式表单时遇到了几个关键问题，我帮你梳理并修复一下：

问题分析 #

1. 组件中createItem方法未正确闭合，导致语法错误
2. HTML模板中错误地混用了ngModel和响应式表单指令，且formControlName绑定不正确
3. 缺少触发添加输入框的按钮
4. 表单数组的遍历和控件绑定逻辑有误

修复后的组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
import { FormDataService } from './form-data.service'; // 确保路径正确
import { Router } from '@angular/router';
import { Requirement } from './requirement.model'; // 确保路径正确

export class RequirementFormComponent implements OnInit {
  private requirement: Requirement; // 修正拼写错误：requirment → requirement
  orderForm: FormGroup;
  items: FormArray; // 暴露给模板直接使用

  constructor(
    private form: FormDataService, 
    private formBuilder: FormBuilder, 
    private router: Router
  ) { }

  ngOnInit() {
    this.requirement = this.form.getRequirment();
    this.orderForm = this.formBuilder.group({
      items: this.formBuilder.array([this.createItem()])
    });
    // 初始化时获取表单数组引用，简化模板逻辑
    this.items = this.orderForm.get('items') as FormArray;
  }

  addItem(): void {
    this.items.push(this.createItem());
  }

  // 补全方法闭合大括号，正确定义表单控件
  createItem(): FormGroup {
    return this.formBuilder.group({
      item: '' // 定义控件名，后续模板需对应
    });
  }
}

修复后的HTML模板代码 #

<ul class="eff">
  <li>
    <div>
      <form [formGroup]="orderForm" class="editForm" novalidate>
        <!-- 遍历表单数组控件，绑定formGroupName到索引 -->
        <div 
          class="input-field" 
          *ngFor="let item of items.controls; let i = index;"
          [formGroupName]="i"
        >
          <!-- 绑定到FormGroup中的item控件，无需混用ngModel -->
          <input 
            class="form-control" 
            formControlName="item" 
            type="text" 
            maxlength="50"
            placeholder="输入内容"
          >
        </div>
        <!-- 添加触发动态添加的按钮 -->
        <button type="button" (click)="addItem()">添加新输入框</button>
      </form>
    </div>
  </li>
</ul>

关键修改说明 #

1. 组件部分：

   • 修正了requirment的拼写错误，避免潜在的变量引用问题
   • 补全createItem方法的闭合大括号，修复语法错误
   • 在ngOnInit中提前获取items表单数组的引用，简化模板中的控件遍历逻辑

2. 模板部分：

   • 移除错误的ngModel绑定，响应式表单无需和模板驱动表单指令混用
   • 给每个遍历项添加[formGroupName]="i"，让Angular识别每个表单数组项对应的FormGroup
   • 将输入框的formControlName改为item，和createItem中定义的控件名保持一致，确保数据双向绑定正常
   • 添加触发addItem()方法的按钮，实现动态添加输入框的功能

修改完成后，每个输入框的数据会正确关联到表单数组中，点击按钮可以动态添加新的输入框，提交时你可以通过this.orderForm.value获取所有输入的数组数据，直接传给后端即可。

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