Angular 2动态表单-实现取消功能

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  template: `
    <form [formGroup]="form">
      <div *ngFor="let field of fields">
        <label>{{ field.label }}</label>
        <input [formControlName]="field.name" [type]="field.type">
      </div>
      <button (click)="cancel()">取消</button>
    </form>
  `,
})
export class DynamicFormComponent implements OnInit {
  form: FormGroup;
  fields: any[] = [
    { label: '姓名', name: 'name', type: 'text' },
    { label: '年龄', name: 'age', type: 'number' },
    { label: '邮箱', name: 'email', type: 'email' }
  ];
  backupData: any;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({});
    this.fields.forEach(field => {
      this.form.addControl(field.name, new FormControl(''));
    });
    this.backupData = this.form.value;
  }

  cancel() {
    this.form.patchValue(this.backupData);
  }
}