Angular 2 Dynamic Form - Implement Cancel functionality

Question

I'm trying to implement Cancel functionality which should revert back to the previous values in the form, which were present during the last time the form was submitted. I'm trying to create a copy of the data object that's being passed to the form and in the Submit function i'm replacing the new values to the copy and in Cancel function, i'm replacing the copy values to the original values. But i'm not getting the previous values when i call the cancel function.

Working code with errors: http://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=preview

I implemented the cancel functionality based on the template driven code of Angualr 2 forms: http://plnkr.co/edit/LCAPYTZElQDjrSgh3xnT?p=preview

Typescript class code:

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>

Anyone got this problem or tried to implement this.

kemsky · Accepted Answer · 2016-08-02 22:35:37Z

7

Form reset will be implemented in RC5.

Your approach does not work with objects:

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

You should clone object instead (there are many ways to do that, i'm using JSON):

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

answered Aug 2, 2016 at 22:35

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Varun Over a year ago

Thanks for the answer, it's working. I'm trying to implement clear functionality, which for the time being clears all the values in the form shown, so that user can enter completely new data. Is that possible do with the above code? Can you please shed some light regarding that clear functionality. Thanks

Varun Over a year ago

Hey Do you have any idea, how to implement the clear functionality? Help me over here. Thanks.

kemsky Over a year ago

currently you need to create copy of your model to implement clear, the same way as in my answer

aditya Over a year ago

Working fine! Is there any builtin way that angular handles this functionality?

Collectives™ on Stack Overflow

Angular 2 Dynamic Form - Implement Cancel functionality

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related