Angular Reactive 形式 - 输入发生了变化

Question

我有一个用于输入销售的反应式表单，其中包含多个相同的行（商品编号、描述、数量、零售和扩展零售）。 如果这对答案有任何影响，则使用

FormArray

。 如果我将

(change)="onChangeItem($event)

添加到

itemNumber

字段，该函数将按预期触发。 但是，我无法弄清楚哪个

itemNumber

字段已更改（即哪一行）。 我想出的唯一解决方案是将索引附加到每个字段的 id 中，这样 id 就会像

itemNumber1

、

itemNumber2

等，但这似乎是一种奇怪的方法。 事件中是否有什么东西可以告诉我哪个项目已更改，或者是否有其他方法可以确定这一点？ 我的目标是不在每次一行发生变化时处理每一行。

Answer 1

您可以使用这种方法：

这是打字稿文件代码。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

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

  form: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      items: this.fb.array([this.createItem()])
    });

    // Subscribe to valueChanges on the FormArray itself
    this.items.valueChanges.subscribe((values: any[]) => {
      console.log('FormArray value changed:', values);
      // Process only the modified item
    });
  }

  get items(): FormArray {
    return this.form.get('items') as FormArray;
  }

  // Create a new FormGroup for each item
  createItem(): FormGroup {
    return this.fb.group({
      itemNumber: ['', Validators.required],
      description: ['', Validators.required],
      quantity: [1, Validators.required],
      retail: [0, Validators.required],
      extendedRetail: [0, Validators.required]
    });
  }

  // Add a new item to the array
  addItem(): void {
    this.items.push(this.createItem());
  }

  // Remove an item from the array
  removeItem(index: number): void {
    this.items.removeAt(index);
  }

  // Handle individual field changes
  onChangeItem(event: any, index: number, field: string): void {
    console.log(`Item at index ${index} changed in field ${field}:`, event);
    // Handle item change here (you can optimize based on the field)
  }

  // Handle form submission
  onSubmit(): void {
    console.log(this.form.value);
  }
}

这是html文件代码。

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
      
      <!-- Item Number -->
      <label for="itemNumber{{i}}">Item #</label>
      <input 
        id="itemNumber{{i}}" 
        formControlName="itemNumber"
        (change)="onChangeItem($event, i, 'itemNumber')"
      />
      
      <!-- Description -->
      <label for="description{{i}}">Description</label>
      <input 
        id="description{{i}}" 
        formControlName="description"
        (change)="onChangeItem($event, i, 'description')"
      />

      <!-- Quantity -->
      <label for="quantity{{i}}">Quantity</label>
      <input 
        id="quantity{{i}}" 
        formControlName="quantity"
        (change)="onChangeItem($event, i, 'quantity')"
      />

      <!-- Retail Price -->
      <label for="retail{{i}}">Retail</label>
      <input 
        id="retail{{i}}" 
        formControlName="retail"
        (change)="onChangeItem($event, i, 'retail')"
      />

      <!-- Extended Retail -->
      <label for="extendedRetail{{i}}">Extended Retail</label>
      <input 
        id="extendedRetail{{i}}" 
        formControlName="extendedRetail"
        (change)="onChangeItem($event, i, 'extendedRetail')"
      />

      <button type="button" (click)="removeItem(i)">Remove Item</button>
    </div>
  </div>

  <button type="button" (click)="addItem()">Add Item</button>
  <button type="submit" [disabled]="form.invalid">Submit</button>
</form>