如何在角度上为具有相同formcontrolname的多个td分配值答案

【问题标题】：How to assign values for multiple tds of same formcontrolname on angular如何在角度上为具有相同formcontrolname的多个td分配值
【发布时间】：2021-01-18 07:46:15
【问题描述】：

我有许多由 ngFor 在表中创建的输入类型。还有其他通过迭代创建的变量

cars=[{id:1232,name:Toyota,bhp:500},
   {id:4321,name:Mclaren,bhp:720},
   {id:2321,name:Mercedes,bhp:470},
   {id:4321,name:Subaru,bhp:342},
   {id:5432,name:Mazda,bhp:4321}]
  CarForm= new FormGroup({
      carNumber: new FormControl(),
    });

HTML

<tr *ngFor = "let car of cars" >
 <td>
   <input type="text" formControlName="carNumber"">
</td>
</tr>

我知道我能够像这样将名称值传递给输入： CarForm.controls.carNumber.setValue(id).

但是通过这种方式，我无法逐行专门传递。还像下面一样更改了我的 HTML，但没有用

[value]="cars(index).id"

我该怎么做？

【问题讨论】：

您应该使用 FormArray 来获取更多信息...read here 获取更多信息

标签： javascript html angular typescript angular-reactive-forms

【解决方案1】：

@Argee 提到的一个好方法是使用FormArray。以下方法使用FormBuilder 构建FormGroup

在您的 TS 文件中

  cars=[
    {id:1232,name:'Toyota',bhp:500},
    {id:4321,name:'Mclaren',bhp:720},
    {id:2321,name:'Mercedes',bhp:470},
    {id:4321,name:'Subaru',bhp:342},
    {id:5432,name:'Mazda',bhp:4321}]
  CarForm = this.fb.group({
    cars: this.fb.array(
      this.cars.map(({id, name, bhp}) => 
        this.fb.group({
          id: [id],
          name: [name],
          bhp: [bhp]
        })
      )
    )
  })
  get carsArray(): FormArray {
    return this.CarForm.get('cars') as FormArray;
  }
  constructor(private fb: FormBuilder) {

  }

在您的 HTML 中

Form Value: <br>
<pre>{{CarForm.value | json }}</pre>
<form [formGroup]='CarForm'>
  <div formArrayName='cars'>
    <div *ngFor="let car of carsArray.controls; let i = index" [formGroupName]='i'><br>
      <label [attr.for]="'car-name' + i">Car {{ i + 1 }} Name </label>
      <input formControlName='name'><br>
      <label [attr.for]="'car-bhp' + i">Car {{ i + 1 }} Bhp </label>
      <input formControlName='bhp'>
      
    </div>
  </div>
</form>

See Sample Code on Stackblitz

【讨论】：