<!DOCTYPE html>
<html lang="en">
<head>
<title>Custom form control</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script data-require="VanillaMask@1.1.0" data-semver="1.1.0" src="https://bankfacil.github.io/vanilla-masker/javascripts/vanilla-masker.js"></script>
<script src="https://npmcdn.com/es6-shim@0.35.0/es6-shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>
</head>
<body>
<payments>loading...</payments>
</body>
</html>
/* Styles go here */
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
(function(global) {
var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
var routerVer = '@3.0.0-rc.1'; // lock router version
var formsVer = '@0.3.0'; // lock forms version
//map tells the System loader where to look for things
var map = {
'app': 'src',
'@angular': 'https://npmcdn.com/@angular', // sufficient if we didn't pin the version
'@angular/router': 'https://npmcdn.com/@angular/router' + routerVer,
'@angular/forms': 'https://npmcdn.com/@angular/forms' + formsVer,
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'upgrade',
];
// Add map entries for each angular package
// only because we're pinning the version with `ngVer`.
ngPackageNames.forEach(function(pkgName) {
map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
});
// Add package entries for angular packages
ngPackageNames.concat(['forms', 'router']).forEach(function(pkgName) {
// Bundled (~40 requests):
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
// Individual files (~300 requests):
//packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
transpiler: 'ts',
typescriptOptions: {
tsconfig: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
map: map,
packages: packages
};
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component } from '@angular/core';
@Component({
moduleId : module.id,
selector: 'payments',
templateUrl: 'payments.html'
})
export class Payments {
cardModel : any = {cardNumber: ""};
constructor() { }
}
<card-input [pholder]="'1234-5678-9012-3456'" [model]="cardModel">
</card-input>
<p> cardModel.cardNumber: {{cardModel.cardNumber}} </p>
import { Directive, forwardRef, ElementRef, Renderer } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
declare var VMasker: any;
const CardMaskLength : number = 16;
const Mask : string = '9999-9999-9999-9999';
export const CUSTOM_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CardMask),
multi: true
};
@Directive({
selector: '[card-accessor]', // Attribute selector
host: {
'(input)': 'input($event.target)',
},
providers: [CUSTOM_VALUE_ACCESSOR]
})
export class CardMask implements ControlValueAccessor {
onChange = (_: any) => { };
onTouched = () => { };
constructor(
private renderer: Renderer,
private elementRef: ElementRef) {}
registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }
registerOnTouched(fn: () => any): void { this.onTouched = fn; }
writeValue(value: any): void {
// Write to view
if (value !== null && value !== undefined) {
value = VMasker.toPattern(value, Mask);
console.log(value);
this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', value);
}
}
input(elt) {
// prevent user to input non-digit characters while typing
// and limit user input to CardMaskLength characters
let val = elt.value.replace(/\D/g, '');
val = val.substring(0, CardMaskLength);
//write formatted to control view
this.writeValue(val);
// Write back to model (number)
this.onChange(val);
}
}
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
//Creating our Application Module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Payments } from './payments';
import { CardMask } from './cardmask';
import { CardInput } from './cardinput';
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [Payments, CardMask, CardInput],
bootstrap: [Payments]
})
export class AppModule {}
import { Component, Input } from '@angular/core';
@Component({
selector: 'card-input', // Attribute selector
template: `<input type="text" card-accessor placeholder={{_placeholder}} [(ngModel)]="_model.cardNumber" />
<br/>
_model.cardNumber: {{_model.cardNumber}}`
})
export class CardInput {
@Input('type') _type : string;
@Input('pholder') _placeholder : string;
@Input('model') _model : {cardNumber: string};
}