formgroupname在ngfo中具有相同的索引

Question

我创建了一个formarray，它允许我添加几个具有相同名称但不同值的字段，但问题是，当我填充一个字段时，其他具有相同名称的字段会自动填充。它好像总是在索引0中；t与CCD_ 1循环。

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('',[Validators.required]),

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

Answer 1

在声明i之前，您已绑定到[formGroupName]='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('',[Validators.required]),

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

请参阅此演示