将表单中每个循环产品的数据显示为值，而不是 Angular 中的占位符

Posted 2023-03-25

【中文标题】将表单中每个循环产品的数据显示为值，而不是 Angular 中的占位符

【英文标题】：Show the data of each loop product in the form as a value and not as a placeholder in Angular

【发布时间】：2021-12-26 09:59:45

【问题描述】：

我在 Angular 中使用 *ngFor 根据我的 API 的响应为每个产品打印一个表单，该响应为我提供了一个包含每个产品信息的对象数组。

发生的情况是，我正在尝试使用产品信息自动完成每个表单的输入值。

我尝试将输入中的直接值作为 value="product.description" 传递，但是 Angular 显然忽略了它。

还有 [(ngModel)] 但是，我将每个产品中的值加倍，并且在 Angular 文档中它说它已被弃用。

如果我将值作为占位符传递，它会显示在表单中，但是在尝试使用 updateProductForm.value 获取值时出现错误，因为占位符无效。

这是我的组件.ts

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;
    )

  

  updateProductForm = new FormGroup(
    sku: new FormControl(),
    part_number: new FormControl(),
    description: new FormControl(),
    price: new FormControl(),
    stock: new FormControl(),
    eta: new FormControl(),
    condition: new FormControl(),
    warranty: new FormControl(),
    package: new FormControl()
  )

  updateProduct(product: any) 
    
    this._apiService.updateProducts(product.id, this.updateProductForm.value).subscribe(() => 
      console.log('Update product!');
      alert(`Update product with ID $product.id `)
    );

  

这是我的组件.html

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

    <div>
      <span>ETA</span>
      <input formControlName="eta" type="number" name="" id="" placeholder="product.eta">
    </div>
    <div>
      <span>Condition</span>
      <input formControlName="condition" type="text" name="" id="" placeholder="product.condition">
    </div>

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

    <div>
      <input formControlName="warranty" type="text" name="" id="" placeholder="product.warranty">
    </div>

    <div>
      <input formControlName="package" type="text" name="" id="" placeholder="product.package">
    </div>

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

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

这是它在屏幕上的打印方式：

【参考方案1】：

问题在于您的表单，实际上，您正在循环表单，

<form [formGroup]="updateProductForm" *ngFor="let product of products" class="product-wrap">

这也创建了具有相同表单组的表单的多个实例。这里的重点是Form Group的最后一个实例会影响.component.ts表单组内的数据。

要通过 API 使用多个表单编辑数据，您需要使用 Form Array 来处理表单的多个动态性质。

点击链接以获取您的问题的解决方案。 Angular Form Array Manual and Example

【讨论】：

是的，当您不需要明确定义表单组时，[(ngModel)] 很有用。

我的建议是在 Array 中设置每个 Form GRoup 值，然后在模板中循环表单组，它会自动填充模板中的 formControls。