Reset dynamic form field issue in angular

Question

I am unable to reset particular form fields in angular. I am attaching here link, where I am trying to achieve, but not working. Please help!!

https://stackblitz.com/edit/angular-dynamic-form-fields-q8rm4u?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

Answer 1

I believe the problem here is a misunderstanding of how to use the AbstractControl.reset() method. The value parameter is not related to the controls you want to reset, but the values you want to reset the controls to.

If you change your method to:

    resetContact(i: number) {
      this.contacts.at(i).reset();
    }

It should work as expected!

Answer 2

Answered it in wrong question (wrong window). Since the solution is not same I am sharing it here.

Instead of index "i" send controls "o" in resetContact

<button class="btn mx-3 mt-3" (click)="resetContact(o)">Reset</button>

Then change the resetContact() function as below:

 resetContact(o) {        
    o.reset();
    
  }

To reset only phone field of a particular control you can use:

resetContact(o) {
    o.get('phone').reset();
  }

Working demo:

https://angular-dynamic-form-fields-cpoqww.stackblitz.io/

Editor URL:

https://stackblitz.com/edit/angular-dynamic-form-fields-cckshh?file=src/app/app.component.ts