updated Usage section of README; refactored directive implementation in demo

Author: nogorilla

README.md

@@ -8,6 +8,68 @@ Angular2 CC Library - for validation and formating of input parameters
 3. run `npm run dev`
 4. visit `http://localhost:4200`
 
+# Usage
+
+## Formating Directive
+On the input fields, add the specific directive to format inputs. 
+All fields must be `type='tel'` in order to support spacing and additional characters
+
+**Credit Card Formater**
+* add `ccNumber` directive:
+```
+<input id="cc-number" type="tel" autocomplete="cc-number" ccNumber>
+```
+
+**Expiration Date Formater**
+Will support format of MM/YY or MM/YYYY
+* add `ccExp` directive:
+```
+<input id="cc-exp-date" type="tel" autocomplete="cc-exp" ccExp>
+```
+
+**CVC Formater**
+* add `ccCvc` directive:
+```
+<input id="cc-cvc" type="tel" autocomplete="off" ccCvc>
+```
+
+### Validation
+Current only Model Validation is supported.
+To implement, import the validator library and apply the specific validator on each form control
+```
+import { CreditCardValidator } from '../../src/validators/credit-card.validator';
+
+@Component({
+  selector: 'app',
+  template: `
+    <form #demoForm="ngForm" (ngSubmit)="onSubmit(demoForm)" novalidate>
+        <input id="cc-number" formControlName="creditCard" type="tel" autocomplete="cc-number" ccNumber>
+        <input id="cc-exp-date" formControlName="expirationDate" type="tel" autocomplete="cc-exp" ccExp>
+        <input id="cc-cvc" formControlName="cvc" type="tel" autocomplete="off" ccCvc>
+    </form>
+  `
+})
+export class AppComponent implements OnInit {
+  form: FormGroup;
+  submitted: boolean = false;
+
+  constructor(private _fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.form = this._fb.group({
+      creditCard: ['', [<any>CreditCardValidator.validateCCNumber]],
+      expirationDate: ['', [<any>CreditCardValidator.validateExpDate]],
+      cvc: ['', [<any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(4)]] 
+    });
+  }
+
+  onSubmit(form) {
+    this.submitted = true;
+    console.log(form);
+  }
+}
+```
+
 # Inspiration
 
 Based on Stripe's [jquery.payment](https://github.com/stripe/jquery.payment) plugin but adapted for use by Angular2
@@ -18,6 +80,7 @@ MIT
 
 # TODO
 - [ ] Documentation
-- [ ] Tests
+- [x] Unit Tests
+- [ ] Protractor Tests
 - [ ] Validate cvc input length against value from card object
 - [ ] publish to NPM

example/src/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
-import { CreditCardValidator } from '../../src/shared/credit-card.validator';
+import { Validators, FormGroup, FormBuilder } from '@angular/forms';
+import { CreditCardValidator } from '../../src/validators/credit-card.validator';
 
 @Component({
   selector: 'app',
@@ -15,7 +15,7 @@ export class AppComponent implements OnInit {
   ngOnInit() {
     this.form = this._fb.group({
       creditCard: ['', [<any>CreditCardValidator.validateCCNumber]],
-      expirationDate: ['', [<any>CreditCardValidator.validateExp]],
+      expDate: ['', [<any>CreditCardValidator.validateExpDate]],
       cvc: ['', [<any>Validators.required, <any>Validators.minLength(3), <any>Validators.maxLength(4)]] // TODO compare actual results against card type
     });
   }

example/src/app.html

@@ -2,17 +2,17 @@
   <p>A general purpose library for building credit card forms, validating inputs and formatting numbers.</p>
   <div class="form-group">
     <label for="cc-number" class="control-label">Card number formatting <small class="text-muted">[<span class="cc-brand"></span>]</small></label>
-    <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" ccNumber>
+    <input id="cc-number" formControlName="creditCard" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="•••• •••• •••• ••••" ccNumber>
   </div>
 
   <div class="form-group">
     <label for="cc-exp" class="control-label">Card expiry formatting</label>
-    <input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" ccExp>
+    <input id="cc-exp" formControlName="expDate" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder="•• / ••" ccExp>
   </div>
 
   <div class="form-group">
     <label for="cc-cvc" class="control-label">Card CVC formatting</label>
-    <input id="cc-cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required ccCVC>
+    <input id="cc-cvc" formControlName="cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="•••" required ccCVC>
   </div>
   <button type="submit" class="btn btn-lg btn-primary">Submit</button>
   <div class="errors" *ngIf="submitted">