在formarray angular中动态添加和删除formgroup

Question

我试图使用计数器组件将formgroup动态添加和删除到formarray。for循环中有4个计数器组件，它们具有一个类别。当用户单击"添加"按钮时，计数器会递增并将一个表单组添加到表单数组中。没问题。

但现在我不得不删除正确的表单组。当用户单击表单组上的删除按钮或递减计数器时，我要删除正确的组。因此，在递减时，我需要删除该类别中的最后一个表单组，在单击"删除"按钮时，我希望计数器递减1并删除该表单组。

这就是我目前所拥有的：

表单组件

profileForm: FormGroup;
ngOnInit() {
this.profileForm = this.fb.group({
Age: new FormControl(0),
PartnerAge: new FormControl(0),
Children: this.fb.array([]),
});

}
childRange = ScheidenChildRange;
childList = [
this.childRange.ZeroToThree,
this.childRange.FourToTwelve,
this.childRange.ThirteenToSeventeen,
this.childRange.OlderThanEighteen,
];
get ChildrenArray() {
return this.profileForm.get("Children") as FormArray;
}
initChildRow(age) {
return this.fb.group({
Age: new FormControl(age),
BSOOrVSO: new FormControl(null),
BSOOrVSOCostsPerMonth: new FormControl(null),
BSOOrVSOHoursAWeek: new FormControl(null),
Childminder: new FormControl(null),
ChildminderCostsPerMonth: new FormControl(null),
ChildminderHoursAWeek: new FormControl(null),
FormalChildcare: new FormControl(null),
});
}
addChild(count: number, childRange: ScheidenChildRange) {
this.ChildrenArray.push(this.initChildRow(childRange));
this.onInputChange.next();
}
removeChild(age: any) {
const index = this.ChildrenArray.controls.findIndex(
(c) => c.value.Age === age.index
);
this.ChildrenArray.removeAt(index);
this.removeEvent.next(age);
this.onInputChange.next();
}

<counter *ngFor="let child of childList | keyvalue; index as i" (incremented)="addChild($event, child.value)"
(decremented)="removeChild($event)" [decrementEvent]="removeEvent.asObservable()" [index]="i" [max]="5"
[label]="child.value | getChildRange">
</counter>

<div formArrayName="Children">
<ng-container *ngFor="let child of ChildrenArray.controls; index as i">
<child-questions *ngIf="child.get('Age').value === 0 || child.get('Age').value === 1"
[Descriptions]="Descriptions" [formGroupName]="i" [Index]="i" [form]="child"
(removeChildEv)="removeChild($event)" (inputChanged)="radioChecked()">
</child-questions>

计数器组件

increment() {
if (this.counter === this.max) {
return;
}
this.counter += 1;
this.incremented.emit({ count: this.counter, index: this.index });
}
decrement() {
if (
(!this.negativeAllowed && this.counter === 0) ||
this.counter < this.min
) {
return;
}
this.counter -= 1;
this.decremented.emit({ count: this.counter, index: this.index });
}
constructor() {}
ngOnInit() {
if (this.decrementEvent) {
this.eventsSubscription = this.decrementEvent.subscribe((data) => {
console.log("Counter", data);
if (this.index === data.index) {
this.decrement();
}
});
}
}
@HostListener("unloaded")
ngOnDestroy(): void {
this.eventsSubscription.unsubscribe();
}

Answer 1

要从FormArray中删除FormGroup，只需将FormGroup索引传递给函数即可。

在模板中：

<div formArrayName="Children">
<ng-container *ngFor="let child of ChildrenArray.controls; index as i">
<child-questions *ngIf="child.get('Age').value === 0 || child.get('Age').value === 1"
[Descriptions]="Descriptions" [formGroupName]="i" [Index]="i" [form]="child"
(removeChildEv)="removeChild($event,i)" (inputChanged)="radioChecked()">
</child-questions>

在removeChild函数中：

removeChild(age: any, index: number) {
this.ChildrenArray.removeAt(index);
this.removeEvent.next(age);
this.onInputChange.next();
}