Cleaned up repository and removed errors

src/app/app.component.html

@@ -0,0 +1,6 @@
+<form #form="ngForm">
+    <counter-input [(ngModel)]="result" name="res"></counter-input>
+</form>
+
+<p>Value:</p>
+<pre>{{ result }}</pre>

src/app/app.component.ts

@@ -2,15 +2,9 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'my-app',
-  template: `<form #form="ngForm">
-      <json-input [(ngModel)]="result" name="res"></json-input>
-  </form>
-
-  <p>form is valid: {{ form.valid ? 'true' : 'false' }}</p>
-
-  <p>Value:</p>
-  <pre>{{ result | json }}</pre>`,
+  templateUrl: './app.component.html'
 })
+
 export class AppComponent  {
   public result = 10;
 }

src/app/app.module.ts

@@ -2,7 +2,7 @@ import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }  from './app.component';
-import {JsonInputModule} from "./json-input.module";
+import {JsonInputModule} from "./counter-input.module";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 
 @NgModule({

src/app/counter-input.component.ts

@@ -0,0 +1,50 @@
+import { Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, ValidationErrors } from '@angular/forms';
+import {CustomInputComponent} from "./custom-input.component";
+
+@Component({
+  selector: 'counter-input',
+  template:
+      `
+    <button (click)="onChange(-1)" (blur)="onBlur()">-</button>
+    {{value}}
+    <button (click)="onChange(1)" (blur)="onBlur()">+</button>
+  `,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CounterInputComponent),
+      multi: true,
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => CounterInputComponent),
+      multi: true,
+    }]
+})
+export class CounterInputComponent extends CustomInputComponent {
+  // set initial value
+  public writeValue(obj: any): void {
+    if (obj) {
+      this.value = parseInt(obj);
+      this.parseError = isNaN(this.value);
+    }
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public validate(c: FormControl): ValidationErrors {
+    return (!this.parseError) ? null : {
+      numberParseError: {
+        valid: false,
+      },
+    };
+  }
+
+  // on button click
+  protected onChange(number: number): void {
+    this.value = this.value + number;
+    this.parseError = isNaN(this.value);
+
+    super.onChange(number);
+  }
+}

src/app/counter-input.module.ts

@@ -1,7 +1,7 @@
 import {FormsModule} from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { JsonInputComponent }   from './json-input.component';
+import { CounterInputComponent }   from './counter-input.component';
 
 
 @NgModule({
@@ -10,10 +10,10 @@ import { JsonInputComponent }   from './json-input.component';
     FormsModule,
   ],
   exports: [
-    JsonInputComponent,
+    CounterInputComponent,
   ],
   declarations: [
-    JsonInputComponent,
+    CounterInputComponent,
   ],
   providers: [],
 })

src/app/custom-input.component.ts

@@ -0,0 +1,34 @@
+import {ControlValueAccessor, FormControl, ValidationErrors, Validator} from '@angular/forms';
+
+export abstract class CustomInputComponent implements ControlValueAccessor, Validator {
+  protected value: number;
+  protected parseError: boolean;
+  private propagateChange: (_: any) => void = () => {};
+  private propagateTouch: () => void = () => {};
+
+  // set initial value
+  public abstract writeValue(obj: any): void;
+
+  // register function to notify on change
+  public registerOnChange(fn: (_: any) => void): void {
+    this.propagateChange = fn;
+  }
+
+  // register function to notify on touch
+  public registerOnTouched(fn: () => void): void {
+    this.propagateTouch = fn;
+  }
+
+  // validates the form, returns null when valid else the validation object
+  public abstract validate(c: FormControl): ValidationErrors;
+
+  // on change
+  protected onChange(value: any): void {
+    this.propagateChange(this.value);
+  }
+
+  // on touch
+  protected onBlur(): void {
+    this.propagateTouch();
+  }
+}

src/app/json-input.component.ts

@@ -1,73 +0,0 @@
-import { Component, Input, forwardRef } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, Validator } from '@angular/forms';
-
-@Component({
-  selector: 'json-input',
-  template:
-      `
-    <button (click)="onChange($event, -1)">-</button>
-      <div>{{value}}</div>
-    <button (click)="onChange($event, 1)">+</button>
-  `,
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => JsonInputComponent),
-      multi: true,
-    },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => JsonInputComponent),
-      multi: true,
-    }]
-})
-export class JsonInputComponent implements ControlValueAccessor, Validator {
-  private value: number;
-  private parseError: boolean;
-
-  // this is the initial value set to the component
-  public writeValue(obj: any) {
-    if (obj) {
-      // this will format it with 4 character spacing
-      this.value = parseInt(obj) || 0;
-    }
-  }
-
-  // registers 'fn' that will be fired wheb changes are made
-  // this is how we emit the changes back to the form
-  public registerOnChange(fn: any) {
-    this.propagateChange = fn;
-  }
-
-  // validates the form, returns null when valid else the validation object
-  // in this case we're checking if the json parsing has passed or failed from the onChange method
-  public validate(c: FormControl) {
-    return (!this.parseError) ? null : {
-      jsonParseError: {
-        valid: false,
-      },
-    };
-  }
-
-  // not used, used for touch input
-  public registerOnTouched() { }
-
-  // change events from the textarea
-  private onChange(event: any, number: number) {
-
-    // get value from text area
-    this.value = this.value + number;
-    if (isNaN(this.value)) {
-      this.parseError = false;
-    } else {
-      // set parse error if it fails
-      this.parseError = true;
-    }
-
-    // update the form
-    this.propagateChange(this.value);
-  }
-
-  // the method set in registerOnChange to emit changes back to the form
-  private propagateChange: (_: any) => void = () => { };
-}

src/index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Angular QuickStart</title>
+    <title>Angular Custom Input Elements</title>
     <base href="/">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -20,6 +20,6 @@
   </head>
 
   <body>
-    <my-app>Loading AppComponent content here ...</my-app>
+    <my-app>Loading App...</my-app>
   </body>
 </html>

src/systemjs-angular-loader.js

@@ -3,7 +3,7 @@ var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
 var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;
 
 module.exports.translate = function(load){
-  if (load.source.indexOf('moduleId') != -1) return load;
+  if (load.source.indexOf('moduleId') !== -1) return load;
 
   var url = document.createElement('a');
   url.href = load.address;

src/systemjs.config.js

@@ -2,8 +2,7 @@
  * System configuration for Angular samples
  * Adjust as necessary for your application needs.
  */
-(function (global) {
-  System.config({
+System.config({
     paths: {
       // paths serve as alias
       'npm:': 'node_modules/'
@@ -42,4 +41,4 @@
       }
     }
   });
-})(this);
+