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, angular.io/api/forms/FormArray#clear — Eliseo
– Eliseo, Commented Jun 16, 2019 at 15:27

Nicholas K · Accepted Answer · 2019-06-16 18:27:29Z

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, 2019 at 18:27

answered Jun 16, 2019 at 16:45

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mizanur Rahman Over a year ago

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 Over a year ago

Of course Sir, here it sets 2 empty strings but I need to make the array completely empty. Thanks sir.

Mizanur Rahman Over a year ago

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.

Nicholas K Over a year ago

Which version of ES are you using? It worked fine for me.

Nicholas K Over a year ago

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

Mizanur Rahman · Accepted Answer · 2019-06-17 05:46:43Z

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, 2019 at 5:46

Mizanur Rahman

851 silver badge8 bronze badges

Comments

Kevinleary.net · Accepted Answer · 2019-09-09 18:31:05Z

2

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

answered Sep 9, 2019 at 18:31

Kevinleary.net

9,8384 gold badges59 silver badges49 bronze badges

Comments

MAHENDRA. A.R · Accepted Answer · 2020-06-20 10:06:19Z

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, 2020 at 10:06

MAHENDRA. A.R

997 bronze badges

Comments

Nikola Stekovic · Accepted Answer · 2019-06-16 15:39:19Z

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, 2019 at 15:39

Nikola Stekovic

6453 silver badges13 bronze badges

11 Comments

Mizanur Rahman Over a year ago

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").

Nikola Stekovic Over a year ago

did you add get nodTags() getter that I've posted?

Mizanur Rahman Over a year ago

yes sir, I've completely followed your code. Even the editor marks the clear() with red underline.

Nikola Stekovic Over a year ago

please, double check demo. Other way to do it is with the following (<FormArray>this.profileForm.get('nod_tags')).clear(); .

Mizanur Rahman Over a year ago

when I hover over the red underlined clear() , it shows a message 'Property 'clear' does not exist on type 'FormArray'.

|

Emdad · Accepted Answer · 2021-05-02 03:35:40Z

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 2, 2021 at 3:35

Emdad

492 bronze badges

Collectives™ on Stack Overflow

How to clear the FormArray values in angular reactive form?

6 Answers 6

5 Comments

Comments

Comments

Comments

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related