skip to Main Content

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

2

Answers


  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!

    Login or Signup to reply.
  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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search