I have a form array inside a FormBuilder and I am dynamically changing forms, i.e. on click load data from application 1 etc.
The issue I am having is that all the data loads in but the data in the FormArray stays and just concats the old items with new.
How do I clear that FormArray to only have the new items.
I've tried this
const control2 = <FormArray>this.registerForm.controls['other_Partners']; control2.setValue([]);
but it doesn't work.
Any ideas?
ngOnInit(): void { this.route.params.subscribe(params => { 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); (<FormGroup>this.registerForm) .setValue(Response.json(), { onlySelf: true }); } }); }
ngOnInit is not being called on click
You can manually clear each FormArray element by calling the removeAt(i) function in a loop. The advantage to this approach is that any subscriptions on your formArray , such as that registered with formArray. valueChanges , will not be lost.
I had same problem. There are two ways to solve this issue.
You can manually clear each FormArray element by calling the removeAt(i)
function in a loop.
clearFormArray = (formArray: FormArray) => { while (formArray.length !== 0) { formArray.removeAt(0) } }
The advantage to this approach is that any subscriptions on your
formArray
, such as that registered withformArray.valueChanges
, will not be lost.
See the FormArray documentation for more information.
You can replace whole FormArray with a new one.
clearFormArray = (formArray: FormArray) => { formArray = this.formBuilder.array([]); }
This approach causes an issue if you're subscribed to the
formArray.valueChanges
observable! If you replace the FromArray with a new array, you will lose the reference to the observable that you're subscribed to.
Or you can simply clear the controls
this.myForm= { name: new FormControl(""), desc: new FormControl(""), arr: new FormArray([]) }
Add something array
const arr = <FormArray>this.myForm.controls.arr; arr.push(new FormControl("X"));
Clear the array
const arr = <FormArray>this.myForm.controls.arr; arr.controls = [];
When you have multiple choices selected and clear, sometimes it doesn't update the view. A workaround is to add
arr.removeAt(0)
A more elegant solution to use form arrays is using a getter at the top of your class and then you can access it.
get inFormArray(): FormArray { this.myForm.get('inFormArray') as FormArray; }
And to use it in a template
<div *ngFor="let c of inFormArray; let i = index;" [formGroup]="i"> other tags... </div>
Reset:
inFormArray.reset();
Push:
inFormArray.push(new FormGroup({}));
Remove value at index: 1
inFormArray.removeAt(1);
Get partial object, get all errors as JSON and many other features, use the NaoFormsModule
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With