ngModel 在 ng-For 中使用时覆盖以前的值

Question

这是我的 html 文件

<form [formGroup]='itemUpdateForm'>
      <div class="row">
        <mat-form-field class="col-sm-8">
            <mat-label>Restaurant Name:</mat-label>
            <input matInput type="text" required  [(ngModel)]="this.restuarantService.selectedProduct.name"   placeholder="Enter Restaurant Name" formControlName='name'>
        </mat-form-field>
      </div>

      <div class="row" *ngFor='let index of counter(this.restuarantService.selectedProduct.Items.length) ;let i = index' formGroupName='Items'>
        <mat-form-field class="col-sm-5">
          <mat-label>Food Name:</mat-label>          
          <input matInput type="text" required  [(ngModel)]='this.restuarantService.selectedProduct.Items[i].foodName'   placeholder="Enter Food Name" formControlName='foodName'>
      </mat-form-field>
      <mat-form-field class="col-sm-5" >
        <mat-label>Price:</mat-label>
        <input matInput type="text" required  [(ngModel)]="this.restuarantService.selectedProduct.Items[i].price"   placeholder="Enter Price" formControlName='price'>
      </mat-form-field>
      </div>
      
    </form>

我的输出看起来像这样 Output

最后一个值会覆盖所有字段中以前的值。所以我得到了所有字段中的最后一个值..我想显示 order.What 中的所有值我需要做的更改

Answer 1

Venkatesh，你有一个类型错误。如果你使用 formBuilder，是

this.formBuilder.group({
 name: this.restuarantService.selectedProduct.name
 ...
})

如果您使用 FormGroup 和 FromControl 的构造函数，您将使用

new FormGroup({
 name: new FormControl({value:this.restuarantService.selectedProduct.name})
 ...
})

或

new FormGroup({
 name: new FormControl(this.restuarantService.selectedProduct.name)
 ...
})

你的代码中的另一个问题是你需要为“项目”使用 FormArray，参见例如this SO

更新看到它总是一样

1.- 创建一个 getter 即 return formArray

  get itemsArray()
  {
    return this.itemUpdateForm.get('Items') as FormArray
  }

2.-创建一个辅助函数，允许我们创建一个formGroup

  createGroupItem(data:any=null)
  {
    data=data || {foodName:'',price:0}
    return this.formBuilder.group({
      foodName:data.foodName,
      price:data.price
    })
  }

在 setValue 之前，您需要将如此多的元素添加到 formArray 作为“items”

setValue() {
    //before setValue, to a FormArray you need that the 
    //formArray has as many element as the data
    this.restuarantService.selectedProduct.Items.forEach(
          x=>this.itemsArray.push(this.createGroupItem()))

    //if the object not match exactly with the object use patchValue, not setValue
    //see how we pass the "Items", simply indicate the items
    this.itemUpdateForm.patchValue({
      name: this.restuarantService.selectedProduct.name,
      Items: this.restuarantService.selectedProduct.Items
    });
  }

.html

<!--a div with formArrayName-->
<div formArrayName="Items">
    <!--iterating over the formArray.controls using the getter
        and use [formGroupName] -->
    <div *ngFor="let control of itemsArray.controls;let i=index"
            [formGroupName]="i">

        <!--the inputs with formControlName, see that in this case 
            is not enclosed by []-->
        <input formControlName="foodName">
        <input formControlName="price">
    
    </div>
</div>

你的 forked stackblitz 有变化

注意：我真的很喜欢创建一个新函数，return formGroup 完全

createGroup(data:any=null)
{
   data=data ||{name:'',Items:null)
   return this.formBuilder.group({
        name:data.name,
        Items:data.items?this.formBuilder.array(
               items.map(x=>this.createGroupItem(x)):
       this.formBuilder.array([])
   })
}

并且在 ngOnInit()

itemUpdateForm=this.createGroup(his.restuarantService.selectedProduct)

ngModel 在 ng-For 中使用时覆盖以前的值

ngModel Overwrites the previous value while using in ng-For

angular

angular-ngmodel

ngmodel