Angular2-SignaturePad Demo with reactive form

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <SignatureForm>
    loading...
  </SignatureForm>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'angular2-signature-pad': 'npm:angular2-signature-pad/bundles/angular2-signature-pad.umd.min.js',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
    
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { SignaturePadModule } from 'angular2-signature-pad';

@Component({
  selector: 'SignatureForm',
  template: `
            <div>  
              <form [formGroup]="signatureForm" (ngSubmit)="OnSubmit(signatureForm.value)">
                  <div>
                      <input type="text" class="form-control" placeholder="First Name" formControlName="FirstName"/>
                          <small *ngIf="IsValidField('FirstName')" class="text-danger">
                              First Name is required
                          </small>
                      <input type="text" class="form-control" placeholder="First Name" formControlName="LastName"/>
                          <small *ngIf="IsValidField('LastName')" class="text-danger">
                              Last Name is required
                          </small>
                      <signature-pad 
                        (onSave)="onSaveHandler($event)" 
                        (onClear)="onClearHandler()" 
                        [width]="width" 
                        [height]="height" 
                        [hideFooter]="noFooter" 
                        [label]="label"
                        [formDataURL]="setSignature()">
                      </signature-pad>
                  </div>
                  <button type="submit" class="btn btn-primary">Save</button>
              </form>
            </div>
  `,
})
export class SignatureFormComponent {
  constructor(private formBuilder: FormBuilder) {}
  
  public signatureForm: FormGroup;
  public width:number = 300;
  public height:number = 300;
  public noFooter:boolean = false;
  public label:string = 'Sign above';
  public formSubmitAttempt:boolean;
  
  ngOnInit() {
      this.signatureForm = this.formBuilder.group({
        FirstName: ['',[Validators.required,Validators.maxLength(25)]],
        LastName: ['',[Validators.maxLength(25)]],
      });
  }

  public OnSubmit(signatureFormData: any) {
    this.formSubmitAttempt=false;
    console.log(JSON.stringify(signatureFormData));
  }

  onSaveHandler(data) {
    console.log(data);
  }
    
  onClearHandler() {
    console.log('On Clear click');
  }
  
  setSignature(){
    return "data:image/png;base64,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";
  }

  public IsValidField(field: string,i?:number) {
    return (this.signatureForm.get(field).invalid && this.signatureForm.get(field).touched) || (this.signatureForm.get(field).invalid && this.formSubmitAttempt);
  }
  
}

@NgModule({
  imports: [ BrowserModule, FormsModule,ReactiveFormsModule,SignaturePadModule],
  declarations: [ SignatureFormComponent ],
  bootstrap: [ SignatureFormComponent ]
})
export class AppModule {}