Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove all items from a FormArray in Angular

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

like image 966
Karl O'Connor Avatar asked Jan 25 '17 12:01

Karl O'Connor


People also ask

How do I remove all items from FormArray?

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.


2 Answers

I had same problem. There are two ways to solve this issue.

Preserve subscription

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 with formArray.valueChanges, will not be lost.

See the FormArray documentation for more information.


Cleaner method (but breaks subscription references)

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.

like image 58
CamelD Avatar answered Sep 18 '22 12:09

CamelD


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) 

UPDATE

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

UPDATE 2:

Get partial object, get all errors as JSON and many other features, use the NaoFormsModule

like image 39
Pian0_M4n Avatar answered Sep 16 '22 12:09

Pian0_M4n