我在formbuilder中有一个表单数组,我正在动态更改表单,即从应用程序1等单击加载数据.
我遇到的问题是所有数据都加载但是formarray中的数据保持不变,只是用旧的方式将旧项目连接起来.
如何清除formarray只有新项目.
我试过这个
const control2 =this.registerForm.controls['other_Partners']; control2.setValue([]);
但它不起作用.
有任何想法吗?谢谢
在nginit
ngOnInit(): void {
this.route.params.subscribe(params => { alert(params['id']);
if (params['id']) {
this.id = Number.parseInt(params['id']);
}
else { this.id = null;}
});
if (this.id != null && this.id != NaN) {
alert(this.id);
this.editApplication();
this.getApplication(this.id);
}
else
{
this.newApplication();
}
}
onSelect(Editedapplication: Application) {
this.router.navigate(['/apply', Editedapplication.id]);
}
editApplication() {
this.registerForm = this.formBuilder.group({
id: null,
type_of_proposal: ['', Validators.required],
title: ['', [Validators.required, Validators.minLength(5)]],
lead_teaching_fellow: ['', [Validators.required, Validators.minLength(5)]],
description: ['', [Validators.required, Validators.minLength(5)]],
status: '',
userID: JSON.parse(localStorage.getItem('currentUser')).username,
contactEmail: JSON.parse(localStorage.getItem('currentUser')).email,
forename: JSON.parse(localStorage.getItem('currentUser')).firstname,
surname: JSON.parse(localStorage.getItem('currentUser')).surname,
line_manager_discussion: true,
document_url: '',
keywords: ['', [Validators.required, Validators.minLength(5)]],
financial_Details: this.formBuilder.group({
id: null,
buying_expertise_description: ['', [Validators.required, Validators.minLength(2)]],
buying_expertise_cost: ['', [Validators.required]],
buying_out_teaching_fellow_cost: ['', [Validators.required]],
buying_out_teaching_fellow_desc: ['', [Validators.required, Validators.minLength(2)]],
travel_desc: ['', [Validators.required, Validators.minLength(2)]],
travel_cost: ['', [Validators.required]],
conference_details_desc: ['', [Validators.required, Validators.minLength(2)]],
conference_details_cost: ['', [Validators.required]],
}),
partners: this.formBuilder.array
(
[
//this.initEditPartner(),
//this.initEditPartner()
// this.initMultiplePartners(1)
]
),
other_Partners: this.formBuilder.array([
//this.initEditOther_Partners(),
])
});
}
getApplication(id)
{
this.applicationService.getAppById(id, JSON.parse(localStorage.getItem('currentUser')).username)
.subscribe(Response => {
if (Response.json() == false) {
this.router.navigateByUrl('/');
}
else {
this.application = Response.json();
for (var i = 0; i < this.application.partners.length;i++)
{
this.addPartner();
}
for (var i = 0; i < this.application.other_Partners.length; i++) {
this.addOther_Partner();
}
this.getDisabledStatus(Response.json().status);
(this.registerForm)
.setValue(Response.json(), { onlySelf: true });
}
}
);
}
点击时不会调用ngonitit
我有同样的问题.有两种方法可以解决这个问题.
您可以通过removeAt(i)
在循环中调用函数来手动清除每个FormArray元素.
clearFormArray = (formArray: FormArray) => { while (formArray.length !== 0) { formArray.removeAt(0) } }
这种方法的优点是,您的任何订阅
formArray
,例如注册的订阅formArray.valueChanges
,都不会丢失.
有关更多信息,请参阅FormArray文档.
您可以用新的FormArray替换整个FormArray.
clearFormArray = (formArray: FormArray) => { formArray = this.formBuilder.array([]); }
如果您订阅了
formArray.valueChanges
observable,这种方法会导致问题!如果使用新数组替换FromArray,则将丢失对您订阅的observable的引用.
或者您可以简单地清除控件
this.myForm= { name: new FormControl(""), desc: new FormControl(""), arr: new FormArray([]) }
添点什么 array
const arr =this.myForm.controls.arr; arr.push(new FormControl("X"));
清除阵列
const arr =this.myForm.controls.arr; arr.controls = [];
当您选择并清除多个选项时,有时它不会更新视图.解决方法是添加
arr.removeAt(0)
使用表单数组的更优雅的解决方案是在类的顶部使用getter,然后您可以访问它.
get inFormArray(): FormArray { this.myForm.get('inFormArray') as FormArray; }
并在模板中使用它
other tags...
重启:
inFormArray.reset();
推:
inFormArray.push(new FormGroup({}));
删除索引处的值:1
inFormArray.removeAt(1);
从Angular 8开始,您可以clear()
用来删除FormArray中的所有控件:
const arr = new FormArray([ new FormControl(), new FormControl() ]); console.log(arr.length); // 2 arr.clear(); console.log(arr.length); // 0
对于以前的版本,推荐的方法是:
while (arr.length) { arr.removeAt(0); }
https://angular.io/api/forms/FormArray#clear
Angular v4.4如果你需要保存对FormArray实例的相同引用,试试这个:
purgeForm(form: FormArray) { while (0 !== form.length) { form.removeAt(0); } }
警告!
Angular v6.1.7 FormArray文档说:
若要更改数组中的控件,请使用FormArray本身中的push,insert或removeAt方法.这些方法可确保在窗体的层次结构中正确跟踪控件.不要修改用于直接实例化FormArray的AbstractControls数组,因为这会导致奇怪和意外的行为,例如破坏的更改检测.
如果您splice
直接在controls
阵列上使用该功能作为建议的答案之一,请记住这一点.
使用该removeAt
功能.
while (formArray.length !== 0) { formArray.removeAt(0) }