How to clear the FormArray values in angular reactive form?

Question

Here, I want to make the FormArray's length zero. (it is mentioned that everything works fine with this form)

profileForm: FormGroup;

ngOnInit() {
   this.profileForm = new FormGroup({
      nod_title: new FormControl(),
      nod_subtitle: new FormControl(null),
      nod_name: new FormControl(null),
      nod_occupation: new FormControl(null),
      nod_description: new FormControl(null),
      nod_tags: new FormArray([new FormControl('hello'), new FormControl('world')]),
    });
  }

 resetTags() {
   if (this.profileForm.value.nod_tags.length) {   // here I tried
     this.profileForm.value.nod_tags.clear();
     console.log(this.profileForm.value.nod_tags)
 }

<button type="button" (click)="resetTags()"> Reset taggs </button>

here, I want to empty the nod_tags value and console.log() should return an empty array.

this.profileForm.get('nod_Tags').clear(), see the docs, https://angular.io/api/forms/FormArray#clear — Eliseo, Jun 16 '19 at 15:27

Nicholas K · Answer 1 · 2019-06-16T18:27:29.327

4

In the resetTags(), get the corresponding value of the FormControl that you require. Now you can call the reset() on it as shown below:

resetTags() {
   this.profileForm.controls['nod_tags'].reset();
}

From your comment, to set it to an empty array use:

resetTags() {
   let arr = <FormArray>this.profileForm.controls['nod_tags'];
   arr.clear();
}

edited Jun 16 '19 at 18:27

answered Jun 16 '19 at 16:45

Nicholas K

15,148
7
31
57

It worked but null value is there after resetting the nod_tags property. Here I need to make the nod_tags array empty like this [ ]. – Mizanur Rahman Jun 16 '19 at 17:15
Of course Sir, here it sets 2 empty strings but I need to make the array completely empty. Thanks sir. – Mizanur Rahman Jun 16 '19 at 17:20
sorry sir, console shows 'arr.clear() is not a function', even editor mark the clear() with red underline. But why! Is there any problem with any other issues. My Angular version is 7.2.15 and CLI version is 7.3.9. – Mizanur Rahman Jun 17 '19 at 04:22
Which version of ES are you using? It worked fine for me. – Nicholas K Jun 17 '19 at 04:29
Also, if that didn't work all you need to do is to clear the array. You already have the reference to it (i.e `arr`), now you could clear it anyway you want. If the edit didn't work for you, there are multiple other ways to clear an array in js/ts.. etc – Nicholas K Jun 17 '19 at 16:56

score 4 · Accepted Answer · answered Jun 17 '19 at 05:46

4

resetTags() {
    const arr = this.profileForm.controls.nod_tags as FormArray;
    while (0 !== arr.length) {
      arr.removeAt(0);
}

This way worked very well. Thanks everyone.

answered Jun 17 '19 at 05:46

Mizanur Rahman

85
1
8

score 2 · Answer 3 · answered Sep 09 '19 at 18:31

The best way to do this as of Angular 8+ is with the clear() method provided with FormArray:

// Reset all tags (Angular 8+)
resetTags() {
  const nodTags = this.profileForm.get('nod_tags') as FormArray;

  if ( nodTags.length > 0 )
    nodTags.clear();
}

If you're using Angular 7 or below, then Mizanur's version will work. Here's a modified version of the resetTags() method that uses it:

// Reset all tags (Angular 7 and below)
resetTags() {
  const nodTags = this.profileForm.get('nod_tags') as FormArray;

  while ( nodTags.length > 0 ) {
      nodTags.removeAt(0);
}

score 2 · Answer 4 · answered Jun 20 '20 at 10:06

2

try this,

this.form = this._formB.group({
    blocks: this._formB.array(["a","b","c"])
});

this.form.controls['blocks'].value.length = 0;

answered Jun 20 '20 at 10:06

MAHENDRA. A.R

91
6

score 1 · Answer 5 · answered Jun 16 '19 at 15:39

1

I think this is the way you want to do it

resetTags() {
    this.nodTags.clear();
 }

 get nodTags(): FormArray {
   return this.profileForm.get('nod_tags') as FormArray;
 }

I also made a small demo

answered Jun 16 '19 at 15:39

Nikola Stekovic

635
3
13

Thank you sir, but It's not working for me! it shows an error in the console (ERROR TypeError: "this.nodTags.clear is not a function"). – Mizanur Rahman Jun 16 '19 at 15:58
did you add `get nodTags()` getter that I've posted? – Nikola Stekovic Jun 16 '19 at 16:00
yes sir, I've completely followed your code. Even the editor marks the clear() with red underline. – Mizanur Rahman Jun 16 '19 at 16:03
please, double check demo. Other way to do it is with the following `(this.profileForm.get('nod_tags')).clear();` . – Nikola Stekovic Jun 16 '19 at 16:05
when I hover over the red underlined clear() , it shows a message 'Property 'clear' does not exist on type 'FormArray'. – Mizanur Rahman Jun 16 '19 at 16:06
Sorry sir, I did not understand your second solution. Could you please make it clear for me? – Mizanur Rahman Jun 16 '19 at 16:11
You're probably using some other version of Angular. Try with `(this.profileForm.get('nod_tags')).controls.length = 0;` – Nikola Stekovic Jun 16 '19 at 16:12
`resetTags() { (this.profileForm.get('nod_tags')).controls.length = 0; }` – Nikola Stekovic Jun 16 '19 at 16:17
Where to use "(this.profileForm.get('nod_tags')).controls.length = 0; " sir? I've used it instead of "this.nodTags.clear();". but is not working! – Mizanur Rahman Jun 16 '19 at 16:18
Can you explain why it doesn't? Both solutions work on the demo that I've provided. – Nikola Stekovic Jun 16 '19 at 16:19
Yes sir, your demo is working fine but why not it is working I don't know. – Mizanur Rahman Jun 16 '19 at 16:22

score 0 · Answer 6 · answered May 02 '21 at 03:35

0

there is more simple way to make nod_tags Empty!

get nod_tagsArray() {
    return this.profileForm.controls.nod_tags as FormArray;
  }

    this.nod_tagsArray.controls =[];

answered May 02 '21 at 03:35

Emdad

51
2

How to clear the FormArray values in angular reactive form?

6 Answers6

Linked