formgroupname 在 ngfor 中有相同的索引

问题描述

我创建了一个formarray，它允许我添加几个名称相同但值不同的字段，但问题是当我填写一个字段时，其他同名的字段会自动填充。它就像总是在索引 0 中并且不使用 *ngfor 循环。

   actions: FormGroup;
constructor(private formBuilder: FormBuilder) {
      this.actions = this.formBuilder.group({
        acts: this.formBuilder.array([]),});
    }
acts() : FormArray {
  return this.actions.get("acts") as FormArray
}
newActs(): FormGroup {
  return this.formBuilder.group({
    n_action: new FormControl('',[Validators.required]),action_libel:new FormControl('',})
}
addaction() {
  this.acts().push(this.newActs());
}
removeAct(i:number) {
  this.acts().removeAt(i);
  console.log("this is ",i)
}

<button type="button" (click)="addaction()" class="btn btn-primary">
    <mat-icon>add_circle_outline</mat-icon>
  </button>
  <div class=" form-group" formArrayName="acts">
   
<div [formGroupName]="i" *ngFor="let action of acts().controls; let i=index">
    <div class="row">
    <div class="form-group">
      <label for="name">Action N°:</label>
      <input type="text" class="form-control" formControlName="n_action" id="n_action"  required [(ngModel)]="analysefnc.n_action" name="n_action">
      <span *ngIf="action.controls.n_action.errors?.required">required</span>

    </div>
    <div class="form-group">
      <label for="name">Action:</label>
      <input type="text" class="form-control" formControlName="action_libel" id="action_libel"  required [(ngModel)]="analysefnc.action_libel" name="action_libel">
      <span *ngIf="action.controls.action_libel.errors?.required">required</span>

    </div>
   
  </div>

解决方法

在声明 [formGroupName]='i' 之前，您对 i 具有约束力

将您的 HTML 更改为

<div *ngFor="let action of acts().controls; let i=index" [formGroupName]="i">

    <!-- Other code here -->
   
  </div>

编辑

对于新的错误，您可能需要将 acts() 更改为 getter，例如

   actions: FormGroup;
   constructor(private formBuilder: FormBuilder) {
      this.actions = this.formBuilder.group({
        acts: this.formBuilder.array([]),});
    }
   get acts() : FormArray {
     return this.actions.get("acts") as FormArray
   }
   newActs(): FormGroup {
     return this.formBuilder.group({
        n_action: new FormControl('',[Validators.required]),action_libel:new FormControl('',})
}
addaction() {
  this.acts.push(this.newActs());
}
removeAct(i:number) {
  this.acts.removeAt(i);
  console.log("this is ",i)
}

在 HTML 中

  <button type="button" (click)="addaction()" class="btn btn-primary">
    <mat-icon>add_circle_outline</mat-icon>
  </button>
  <div class=" form-group" formArrayName="acts">
    <div *ngFor="let action of acts.controls; let i=index" [formGroupName]="i">
      <div class="row">
        <div class="form-group">
          <label for="name">Action N°:</label>
          <input
            type="text"
            class="form-control"
            formControlName="n_action"
            id="n_action"
            required
            name="n_action"
          />
          <span *ngIf="action.get('n_action').errors?.required">required</span>
        </div>
        <div class="form-group">
          <label for="name">Action:</label>
          <input
            type="text"
            class="form-control"
            formControlName="action_libel"
            id="action_libel"
            required
            name="action_libel"
          />
          <span *ngIf="action.get('action_libel').errors?.required"
            >required</span
          >
        </div>
      </div>
    </div>
  </div>

See this demo