각도 2 동적 양식 - 구현 취소 기능

Question

양식을 마지막으로 제출할 때 있었던 이전 값으로 되돌려 야하는 취소 기능을 구현하려고합니다. 양식에 전달되는 데이터 개체의 복사본을 만들려고합니다. 복사 기능과 취소 기능에서 새 값을 바꿀 것입니다. 복사 값을 원래 값으로 바꿉니다. 하지만 난 취소 기능을 호출하면 이전 값을 가져 오지 않을거야. 오류가있는

근무 코드 : http://plnkr.co/edit/LCAPYTZElQDjrSgh3xnT?p=preview

타이프 라이터 클래스 코드 :

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 코드 : http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview

나는 Angualr 2 형태의 템플릿 중심 코드를 기반으로 취소 기능을 구현

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

누구나이 문제가 있거나이를 구현하려고했습니다.

Answer 1

형식 재설정은 RC5에서 구현됩니다.

객체와 함께 작동하지 않습니다 방법 : 당신은 대신 개체를 복제해야

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

이 (할 수있는 많은 방법이있다가, 내가 JSON을 사용하고 있습니다) : 대답에 대한

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