How to set component back to initial state in Angular 2

Question

I have a component that is a modal which has a form and some other variables outside of that form. The component is something like this:

The component:

export class PersonComponent implements OnInit { 

countPerson: number=0;
persons: Person [] = [];

personForm : FormGroup;

ngOnInit(){
  this.step1Form= this.fb.group({
     firstName: 'Levi',
     lastName:  'Ackerman'
  });
}

submitPerson(person: Person){
  this.persons.push(person);
  this.incrementPerson();
}

incrementPerson(){
  this.count++;
}

}

In the template:

 <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body>
         <label>First Name</label>
         <input type="text" formControlName="firstName">
         <label>LastName Name</label>
         <input type="text" formControlName="lastName">
         <button type="button" (click)="submitPerson()">Submit</button>
      </div>
     <div class="modal-footer">
         <button type="button" data-dismiss="modal">Close</button>
     </div>
   </div> 
</div>

I want to reset the form controls back to initial values and as well set the variables outside of the form back to initial value. So basically I want the whole component be back to initial state. I want the component be reset to initial state once closed.

The modal is trigged by a parent component. So the modal is a child component — ilovejavaAJ, Apr 17 '17 at 19:30
no just adding the a a list of person to the persons array using the form. Once I close the modal I want the form and other variables be back to initial state. So the variables like persons array, count person and other varaibles (which I just not include it because there's too many) be back to initial state. Is there a way for the whole component be back to initial state. — ilovejavaAJ, Apr 17 '17 at 19:37
what is happening currently. can you create a plunker. use modal from this [answer](http://stackoverflow.com/questions/42735858/ng2-bootstrap-show-hide-modal-as-child-component/42736058#42736058) as sample — Aravind, Apr 17 '17 at 19:41
I forked it and trying right now but getting error adding the form inside the body. — ilovejavaAJ, Apr 17 '17 at 20:09
both modal and parent component contains same form object or different — Aravind, Apr 17 '17 at 20:10

score 4 · Answer 1 · answered Apr 17 '17 at 19:57

4

If there is a form on your HTML (not shown in the provided snippet) you can use the reset method on the form: this.yourFormName.reset()

This resets the form state back to pristine and unchanged.

answered Apr 17 '17 at 19:57

DeborahK

57,520
12
104
129

will that reset resets the whole component or just the form? My component consist of a form and variables. I want the form as well as the variables of the component be back to initial values. – ilovejavaAJ Apr 17 '17 at 20:00
That will reset the form. You'd need to update your own variables yourself. – DeborahK Apr 17 '17 at 20:02
In my code examples, I have an `onSaveComplete()` that is executed after a save operation. It calls the reset method and then navigates back to the overview/list page. You could easily change this to instead re-initialize all of your component variables. You can see my code example here: https://github.com/DeborahK/Angular2-ReactiveForms/tree/master/APM-Updated – DeborahK Apr 17 '17 at 21:13
Still need to know how to reset the entire component per the question – fIwJlxSzApHEZIl Feb 04 '22 at 15:56

How to set component back to initial state in Angular 2

1 Answers1