如何在角度上為具有相同 formcontrolname 的多個 tds 分配值

Question

我有許多由 ngFor 在表中創建的輸入類型。還有通過迭代創建的其他變量

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= 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"

我怎樣才能做到這一點？

Answer 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>

請參閱 Stackblitz 上的示例代碼