FormArray Angular中的动态id

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

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="form">
      <div formArrayName="items">
        <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
          <input formControlName="name" placeholder="Name">
          <input formControlName="value" placeholder="Value">
          <button type="button" (click)="removeItem(i)">Remove</button>
        </div>
      </div>
      <button type="button" (click)="addItem()">Add Item</button>
    </form>
  `
})
export class DynamicFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      items: this.fb.array([])
    });
  }

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

  addItem() {
    const id = this.items.length + 1; // 动态生成id
    const itemGroup = this.fb.group({
      id: [id],
      name: [''],
      value: ['']
    });
    this.items.push(itemGroup);
  }

  removeItem(index: number) {
    this.items.removeAt(index);
  }
}

addItem() {
  const id = this.items.length + 1; // 确保每次都重新计算id
  const itemGroup = this.fb.group({
    id: [id],
    name: [''],
    value: ['']
  });
  this.items.push(itemGroup);
}

import { v4 as uuidv4 } from 'uuid';

addItem() {
  const id = uuidv4(); // 使用UUID作为唯一标识符
  const itemGroup = this.fb.group({
    id: [id],
    name: [''],
    value: ['']
  });
  this.items.push(itemGroup);
}