Angular 2 Dynamic Form - Implementieren Abbrechen der Funktionalität

Question

Ich versuche, Cancel-Funktionalität zu implementieren, die zu den vorherigen Werten in dem Formular zurückkehren sollte, die während der letzten Übermittlung des Formulars vorhanden waren. Ich versuche, eine Kopie des Datenobjekts zu erstellen, das an das Formular übergeben wird, und in der Submit-Funktion ersetze ich die neuen Werte durch die Kopie, und in der Funktion Cancel ersetze ich die Kopierwerte durch die ursprünglichen Werte. Aber ich bekomme nicht die vorherigen Werte, wenn ich die Abbruchfunktion anrufe.

Arbeits Code mit Fehlern: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview

implementiert ich die Funktionalität abzubrechen basierend auf der Vorlage getrieben Code von Angualr 2 Formen: http://plnkr.co/edit/LCAPYTZElQDjrSgh3xnT?p=preview

Typoskript Klassencode:

import { Component, Input, OnInit } from '@angular/core'; 
import { FormGroup, REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; 
import { QuestionBase }     from './question-base'; 
import { QuestionControlService }  from './question-control.service'; 

@Component({ 
    selector: 'dynamic-form', 
    templateUrl: 'app/dynamic-form.component.html', 
    directives: [REACTIVE_FORM_DIRECTIVES], 
    providers: [QuestionControlService] 
}) 
export class DynamicFormComponent implements OnInit { 

    @Input() questions: QuestionBase<any>[] = []; 
    form: FormGroup; 
    payLoad:object; 
    questiont: QuestionBase<any>; 
    constructor(private qcs: QuestionControlService) { } 
    ngOnInit() { 
    this.form = this.qcs.toFormGroup(this.questions); 
    console.log("Form Init",this.questions); 
    this.questiont=this.questions; 
    } 
    onSubmit() { 
    this.payLoad = JSON.stringify(this.form.value); 
    this.payLoad2=this.payLoad; 
    this.questiont=this.questions; 
    console.log("Original Data",this.questions); 
    console.log("Duplicate Data",this.questiont); 
    } 
    cancel(){ 
    this.questions=this.questiont; 
    console.log("Original Data",this.questions); 
    console.log("Duplicate Data",this.questiont); 
    console.log("Canceled"); 
    } 

} 

HTML-Code:

<div> 
    <form [formGroup]="form"> 

    <div *ngFor="let question of questions" class="form-row"> 
     <label [attr.for]="question.key">{{question.label}}</label> 

    <div [ngSwitch]="question.controlType"> 

    <input *ngSwitchCase="'textbox'" [formControlName]="question.key" 
      [id]="question.key" [type]="question.type" [(ngModel)]="question.value"> 

    <select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" > 
     <option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option> 
    </select> 

    </div> 
    <div class="errorMessage" *ngIf="!form.controls[question.key].valid">{{question.label}} is required</div> 
    </div> 

    <div class="form-row"> 
     <button type="submit" [disabled]="!form.valid" (click)="onSubmit()">Save</button> 
     <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button> 

    </div> 
    </form> 

    <div *ngIf="payLoad" class="form-row"> 
    <strong>Saved the following values</strong><br>{{payLoad}} 
    </div> 
</div> 

Jeder hat dieses Problem oder versucht, dies zu implementieren.

Answer 1

Formularreset wird in RC5 implementiert.

Ihr Ansatz mit Objekten funktioniert nicht:

this.questiont=this.questions; //you are sharing refrence to the same object 

Sie stattdessen Objekt klonen sollte (es gibt viele Möglichkeiten, das zu tun, bin ich mit JSON):

this.questiont = JSON.parse(JSON.stringify(this.questions));