Wie setze ich die Komponente zurück in den Anfangszustand in Angular 2

Question

Ich habe eine Komponente, die ein Modal ist, das eine Form und einige andere Variablen außerhalb dieser Form hat. Die Komponente ist so etwas wie dieses:

Die Komponente:

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 der Vorlage:

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

Ich möchte das Formular zum Zurücksetzen auf die Anfangswerte steuert zurück und auch die Variablen außerhalb gesetzt der Form zurück zum Anfangswert. Also möchte ich, dass die gesamte Komponente wieder in ihrem ursprünglichen Zustand ist. Ich möchte, dass die Komponente nach dem Schließen in den Anfangszustand zurückgesetzt wird.

Answer 1

Wenn ein Formular auf Ihrem HTML ist (nicht in den mitgelieferten Schnipseln gezeigt) können Sie die Reset-Methode auf dem Formular: this.yourFormName.reset()

Das setzt die Form Zustand zurück zu unberührten und unverändert.