Angular中*ngFor循环生成的产品表单如何绑定初始值而非占位符

• 你当前所有通过*ngFor循环生成的表单，都绑定了同一个全局updateProductForm实例，所有表单的输入都会修改同一个FormGroup对象，自然会出现值同步、无法单独绑定每个产品初始值的问题
• 响应式表单场景下，formControlName优先级高于原生value属性，FormControl未设置初始值时，手动绑定的value会被直接忽略
• placeholder属于提示文本，不属于表单控件的有效值，自然无法通过form.value获取

1. 修改component.ts代码 #

给每个产品单独创建独立的FormGroup实例，初始化时直接填入产品的原有值，修改后代码如下：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { ApiService } from '../services/api.service';

@Component({
  selector: 'app-dashboard-listings',
  templateUrl: './dashboard-listings.component.html',
  styleUrls: ['./dashboard-listings.component.css']
})
export class DashboardListingsComponent implements OnInit {

  constructor(private _apiService: ApiService) { }

  // 存储产品及对应独立表单
  products: any = [];

  ngOnInit() {
    this._apiService.getUserProducts().subscribe(res => {
      // 遍历产品，给每个产品初始化独立的更新表单，填入初始值
      this.products = res.map(productItem => ({
        ...productItem,
        updateForm: new FormGroup({
          sku: new FormControl(productItem.sku),
          part_number: new FormControl(productItem.part_number),
          description: new FormControl(productItem.description),
          price: new FormControl(productItem.price),
          stock: new FormControl(productItem.stock),
          eta: new FormControl(productItem.eta),
          condition: new FormControl(productItem.condition),
          warranty: new FormControl(productItem.warranty),
          package: new FormControl(productItem.package)
        })
      }))
    })
  }

  updateProduct(product: any) {
    // 直接取当前产品对应表单的有效值提交
    this._apiService.updateProducts(product.id, product.updateForm.value).subscribe(() => {
      console.log('Update product!');
      alert(`Update product with ID ${product.id} `)
    });
  }
}

2. 修改component.html代码 #

每个表单绑定当前产品对应的独立FormGroup实例，不需要再用placeholder填值，修改后代码如下：

<form [formGroup]="product.updateForm" *ngFor="let product of products" class="product-wrap">
    <div>
      <span>SKU:</span>
      <input formControlName="sku" type="text">
    </div>
    <div>
      <span>Part Number</span>
      <input formControlName="part_number" type="text">
    </div>
    <div>
      <span>Description</span>
      <input formControlName="description" type="text">
    </div>
    <div>
      <span>Stock</span>
      <input formControlName="stock" type="number">
    </div>
    <div>
      <span>Price</span>
      <input formControlName="price" type="number">
    </div>

    <div>
      <span>ETA</span>
      <input formControlName="eta" type="number">
    </div>
    <div>
      <span>Condition</span>
      <input formControlName="condition" type="text">
    </div>

    <div>
      <span>Launched</span>
      <span>20-10-2021</span>
    </div>

    <div>
      <input formControlName="warranty" type="text">
    </div>

    <div>
      <input formControlName="package" type="text">
    </div>

    <div>
      <span>delete</span>
      <span>{{product.id}}</span>
    </div>

    <div>
      <button [disabled]="!product.updateForm.dirty" (click)="updateProduct(product)" type="submit"
        class="btn-blue">Update</button>
    </div>
  </form>

修改后每个表单独立存储对应产品的数据，初始值会自动填充到输入框中，修改后提交直接取当前表单的有效值即可，不会出现值串扰的问题。

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