Wie setze ich eine FormGroup von Angular4 auf ihren ursprünglichen Zustand zurück?

Question

Ich lerne Angular4 spezifischere reaktive Formen. Ich habe die Heroes-Demo laufen lassen und bin auf etwas stecken geblieben.

Auf diesem Plunker müssen wir einen Superhelden auswählen, und es wird die Adresse des Helden zeigen. Ich habe eine Reset-Taste für jede Adresse hinzugefügt, aber wenn ich auf eine Adresse klicke, wird alles zurückgesetzt.

Im Beispiel haben wir:

createForm() { //Set up form and array of addresses 
    this.heroForm = this.fb.group({ 
     name: '', 
     secretLairs: this.fb.array([]), 
     power: '', 
     sidekick: '' 
    }); 
    } 

    //Function to revert changes 
    revert() { this.ngOnChanges(); } 

    //This function will set the name from original object 
    ngOnChanges() { 
    this.heroForm.reset({ 
     name: this.hero.name 
    }); 

    //It will reload the form array with original values 
    this.setAddresses(this.hero.addresses); 
    } 

    //Create new formgroups and add to formArray 
    setAddresses(addresses: Address[]) { 
    const addressFGs = addresses.map(address => this.fb.group(address)); 
    const addressFormArray = this.fb.array(addressFGs); 
    this.heroForm.setControl('secretLairs', addressFormArray); 
    } 

Diese Ordnung ist, es funktioniert, aber es wird das gesamte Formular zurückgesetzt. Zum Beispiel hat Whirlwind zwei Adressen. Ich habe eine neue Adresse hinzugefügt, und danach ändere ich die erste Adresse. Ich mache einen Fehler und möchte die ursprünglichen Werte erhalten, ich klicke auf den Reset-Knopf, und es wird meine neue Adresse entfernen, und es wird alle Daten auf dem Formular zurücksetzen.

Wie kann ich pro Adresse und nicht das gesamte Formular zurücksetzen?

Dank

Answer 1

Sie value oder getRawValue() verwenden können, um die Werte nach der Initialisierung zu lesen.

Nach reset() können Sie dann die Anfangswerte zurücksetzen, indem Sie setValue() mit den zuvor gelesenen Werten verwenden.

Siehe

• https://angular.io/api/forms/FormGroup
• https://angular.io/guide/reactive-forms#populate-the-form-model-with-setvalue-and-patchvalue