FormArray的Angular.removeAt(i)在DOM-Angular中不更新

Question

我认为这是我的实现的一个问题，但从我提出的这个问题来看，我创建动态FormArray的代码似乎应该是基于函数的。当我将其集成到我的项目中时，remove函数确实会从FormArray中删除元素，但它不会反映在接口中/不会从DOM中删除对象。是什么原因造成的？

import {
Component,
VERSION
} from '@angular/core';
import {
FormGroup,
FormControl,
FormArray,
Validators,
FormBuilder
} from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
objectProps: any[];
public dataObject = [{
"label": "Name",
"name": "name",
"type": "text",
"data": ""
},
{
"label": "Contacts",
"name": "contacts",
"type": "inputarray",
"array": []
}
]
form: FormGroup;
constructor(private _fb: FormBuilder) {}
ngOnInit() {
const formGroup = {};
for (let field of this.dataObject) {
if (field.type == "inputarray") {
console.log("THIS IS " + field.type)
formGroup[field.name] = this._fb.array([''])
} else {
console.log("THIS IS " + field.type)
formGroup[field.name] = new FormControl(field.data || '') //, this.mapValidators(field.validation));
}
}
this.form = new FormGroup(formGroup);
}
addFormInput(field) {
const form = new FormControl('');
( < FormArray > this.form.controls[field]).push(form);
}
removeFormInput(field, i) {
( < FormArray > this.form.controls[field]).removeAt(i);
}
}

<form *ngIf="form" novalidate (ngSubmit)="onSubmit(form.value)" [formGroup]="form">
<div *ngFor="let field of dataObject">
<h4>{{field.label}}</h4>
<div [ngSwitch]="field.type">
<input *ngSwitchCase="'text'" [formControlName]="field.name" [id]="field.name" [type]="field.type" class="form-control">
<div *ngSwitchCase="'inputarray'">
<div formArrayName="{{field.name}}" [id]="field.name">
<div *ngFor="let item of form.get(field.name).controls; let i = index;" class="array-line">
<div>
<input class="form-control" [formControlName]="i" [placeholder]="i">
</div>
<div>
<button id="btn-remove" type="button" class="btn" (click)="removeFormInput(field.name, i)">x</button>
</div>
</div>
</div>
<div>
<button id="btn-add" type="button" class="btn" (click)="addFormInput(field.name)">Add</button>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-danger btn-block" style="float: right; width:180px" [disabled]="!form.valid">Save</button>

Answer 1

这不是一个很好的解决方案，但我通过操纵值和删除控件来解决问题。

我只是将要删除的项移动到数组的末尾，然后删除最后一个项。

removeItem(index: number): void {
const value = this.formArray.value;
this.formArray.setValue(
value.slice(0, index).concat(
value.slice(index + 1),
).concat(value[index]),
);
this.formArray.removeAt(value.length - 1);
}

我希望它能帮助将来在这个问题上挣扎的人。

Answer 2

也许您可以尝试使用对应用程序的引用来强制进行更改检测。要执行此操作，请在构造函数中注入ApplicationRef，并调用tick((在removeFormInput方法上。

constructor(private _fb: FormBuilder, private appRef: ApplicationRef) {}

并且在removeFormInput中

removeFormInput(field, i) {
(<FormArray>this.form.controls[field]).removeAt(i);
this.appRef.tick();
}

查看angular文档：API>@angular/core/ApplicationRef.tick((

Answer 3

替换下面的函数，您不会从"dataObject"中删除行对象。

removeFormInput(field, i) {
( < FormArray > this.form.controls[field]).removeAt(i);
this.dataObject.splice(this.dataObject.indexOf(field),1);
}

看看这里添加和删除我在stackblitz上构建的表单项，对我来说它工作得很好，添加和删除项。。。看一看。

工作版本

Answer 4

我也遇到了这个问题。对我来说，解决方案是去掉/修复NgFor*中的trackBy函数。我认为你需要引入一个合适的trackBy函数，它可能会解决你的错误。

酱：如何将"trackBy"与"ngFor"一起使用