Tengo un componente que es un modal que tiene un formulario y algunas otras variables fuera de ese formulario. El componente es algo como esto:

El componente:

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

En la plantilla:

 <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>

Quiero restablecer los controles del formulario a los valores iniciales y también establecer las variables fuera del formulario al valor inicial. Básicamente, quiero que todo el componente vuelva al estado inicial. Quiero que el componente se restablezca al estado inicial una vez cerrado.