\ No newline at end of file
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7b11a65..7da5e04 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,15 +2,9 @@ import { Component } from '@angular/core';
@Component({
selector: 'my-app',
- template: `
-
-
form is valid: {{ form.valid ? 'true' : 'false' }}
-
-
Value:
-
{{ result | json }}
`,
+ templateUrl: './app.component.html'
})
+
export class AppComponent {
public result = 10;
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 96f0cff..0a88eb5 100644
--- a/src/app/app.module.ts
+++ b/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({
diff --git a/src/app/counter-input.component.ts b/src/app/counter-input.component.ts
new file mode 100644
index 0000000..5deb73e
--- /dev/null
+++ b/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:
+ `
+
+ {{value}}
+
+ `,
+ 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);
+ }
+}
\ No newline at end of file
diff --git a/src/app/json-input.module.ts b/src/app/counter-input.module.ts
similarity index 70%
rename from src/app/json-input.module.ts
rename to src/app/counter-input.module.ts
index b0ed74d..e157eea 100644
--- a/src/app/json-input.module.ts
+++ b/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: [],
})
diff --git a/src/app/custom-input.component.ts b/src/app/custom-input.component.ts
new file mode 100644
index 0000000..cea0a40
--- /dev/null
+++ b/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();
+ }
+}
\ No newline at end of file
diff --git a/src/app/json-input.component.ts b/src/app/json-input.component.ts
deleted file mode 100644
index eadb75d..0000000
--- a/src/app/json-input.component.ts
+++ /dev/null
@@ -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:
- `
-
-
{{value}}
-
- `,
- 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 = () => { };
-}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 8327435..48afbd5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,7 @@
- Angular QuickStart
+ Angular Custom Input Elements
@@ -20,6 +20,6 @@
- Loading AppComponent content here ...
+ Loading App...
diff --git a/src/systemjs-angular-loader.js b/src/systemjs-angular-loader.js
index 8b10054..741673b 100644
--- a/src/systemjs-angular-loader.js
+++ b/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;
diff --git a/src/systemjs.config.js b/src/systemjs.config.js
index 129704a..9373fb2 100644
--- a/src/systemjs.config.js
+++ b/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);
+