角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));