Angular中如何从name为length[]的多个输入字段获取数组输入

嘿，我懂你遇到的这个问题！在Laravel里用name="length[]"就能自动把多行输入打包成数组，但Angular的ngModel处理同名表单控件的逻辑不一样，直接用name="length[]"会覆盖之前的值，所以最后只能拿到最后一个输入。别担心，我给你两种解决方案，分别对应模板驱动表单和响应式表单，看你哪种更顺手：

方案一：模板驱动表单（适合简单场景） #

这种方式和你原来的写法更接近，只需要调整绑定逻辑：

1. 在组件类里定义存储数组
   先在你的组件.ts文件里声明一个数组，用来保存每一行的长度值：

   export class YourComponent {
     // 初始化空数组，后续添加行时会往这里push元素
     lengths: number[] = [];
   
     // 添加新行的方法，点击按钮时调用
     addRow() {
       this.lengths.push(null); // 可以设默认值比如0，或者null让用户输入
     }
   }
   

2. 修改模板中的绑定
   用*ngFor遍历数组，把每个输入框绑定到数组的对应索引，同时给每个输入框设置唯一的name属性（避免Angular表单混淆）：

   <!-- 假设你有一个按钮触发添加行 -->
   <button (click)="addRow()">添加长度行</button>
   
   <table>
     <tr *ngFor="let len of lengths; let i = index">
       <td>
         <input 
           type="number" 
           class="form-control form-control-sm" 
           [(ngModel)]="lengths[i]" 
           name="length_{{i}}"  <!-- 用索引拼接唯一name -->
         >
       </td>
     </tr>
   </table>
   

   这样操作后，lengths数组就会自动同步所有输入框的值，比如用户输入40、50、60，lengths就会是[40,50,60]，和你想要的{0 =>40, 1 =>50, 2 =>60}结构逻辑一致。

方案二：响应式表单（适合复杂/需要验证的场景） #

如果你的表单需要做验证、动态修改等复杂操作，响应式表单会更灵活：

1. 组件类中创建FormArray
   先导入表单相关模块，然后创建包含FormArray的表单组：

   import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
   
   export class YourComponent {
     form: FormGroup;
   
     constructor(private fb: FormBuilder) {
       // 初始化表单，包含一个空的FormArray存储长度值
       this.form = this.fb.group({
         lengths: this.fb.array([])
       });
     }
   
     // 快捷获取lengths这个FormArray
     get lengths(): FormArray {
       return this.form.get('lengths') as FormArray;
     }
   
     // 添加新行的方法
     addRow() {
       // 往FormArray里添加一个空的表单控件
       this.lengths.push(this.fb.control(null));
     }
   }
   

2. 模板中绑定FormArray
   用formArrayName绑定数组，然后遍历控件绑定到每个输入框：

   <button (click)="addRow()">添加长度行</button>
   
   <form [formGroup]="form">
     <table formArrayName="lengths">
       <tr *ngFor="let control of lengths.controls; let i = index">
         <td>
           <input 
             type="number" 
             class="form-control form-control-sm" 
             [formControlName]="i"
           >
         </td>
       </tr>
     </table>
   </form>
   

   当你需要获取所有值时，直接访问this.form.value.lengths就能得到数组，比如[40,50,60]，完全符合你的需求。

两种方案都能实现你要的效果，选哪种取决于你的表单复杂度。如果只是简单的多行输入，方案一足够；如果需要验证、动态禁用控件等操作，方案二更合适。

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