使用选定的行角动力阵列填充输入字段

Question

当我在列表中选择值时，为什么我的第二行从第一行中伸出相同的值？

当第二行添加时，一切都可以，但是它会使我避免使用相同的阀门。因为当我尝试输入一些值时，它可以。

html

<form [formGroup]="Form">
  <div formArrayName="ItemRec">
    <table>
      <thead>
      <tr>
        <th>FORM</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let ItemRec of ItemRec.controls; let i = index;"
          [formGroupName]="i">
        <td (click)="removeRow(i)" style="width:100px" align="center">
          <i class="fa fa-trash fa-2x"></i></td>
        <td>
          <input style="width:200px" class="form-control"
                 formControlName="dr" ngModel={{transactionCode}}>
        </td>
      </tr>
      </tbody>
    </table>
</form>

.ts

this.Form = this.fb.group({
    Id:['0'],
    ItemRec: this.fb.array([this.CreateItemRec()])
  })
}  


CreateItemRec(): FormGroup {
  return this.fb.group({
    id:[0],
    dr: new FormControl('',Validators.required),
  })
}

get ItemRec(): FormArray {
  return <FormArray>this.Form.get('ItemRec') as 
  FormArray
}


addRow(): void {
  this.ItemRec?.push(this.CreateItemRec());

​

Answer 1

formcontrolname =“ dr” ngmodel = {{transactionCode}}}

您将模板驱动的形式与反应性形式混合。这可能会有意外的行为。请删除NGMODEL。

我想它将其设置为NGFOR创建的每个字段的默认值。如果应该是默认值，请在形式创建中设置它。

CreateItemRec(): FormGroup {
  return this.fb.group({
    id:[0],
    dr: new FormControl(this.transactionCode, Validators.required),
  })
}