HTML5 input: Pattern

qontu · Aug 27, 2016 · 933883d · 933883d
1 parent e4a3699
commit 933883d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/README.MD b/README.MD
@@ -32,6 +32,8 @@ If you need to support a previous version of Angular 2 for now, please see the [
 - time (In progress)
 - datetime (In progress)
 - html5 inputs (In progress)
+  - pattern (Ok).
+  - number (Ok).
 - typeahead (In progress)
 - ui-select (In progress)
 - complex form (In progress)
@@ -137,6 +139,8 @@ export class MyComponent {
         disabled="true"
         min="1"
         max="8"
+        pattern="^[a-zA-Z]{1,3}"
+        [fnErrorPattern]="myHandlePatternError"
         [fnErrorLength]="myHandleError"></inline-editor>
 ```
 
@@ -149,6 +153,8 @@ The `$event` argument will be the value return of the input send.
 * **`min`** [`number`] the min attribute specifies the minimum value for an `<input>` element. Default is `1`.
 * **`max`** [`number`] the max attribute specifies the maximum value for an `<input>` element. Default is `Infinity`.
 * **`fnErrorLength`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and the length of the input is error (the value is not between min and max). 
+* **`pattern`** [`string`] Regular expression (RegEx) that must satisfy the value.
+* **`fnErrorPattern`** [`event handler`] The expression specified will be invoked whenever the form is save via a click on save button and the pattern of the input is error (the value not satisfy the pattern). 
 
 
 
@@ -319,7 +325,8 @@ Typescript code:
   name="editableText1" 
   size="8" 
   min="3"
-  max="5" [fnErrorLength]="fnErrorLength"></inline-editor>
+  max="5" 
+  [fnErrorLength]="fnErrorLength"></inline-editor>
 
   <inline-editor type="select" 
                 [(ngModel)]="editableSelectDoesntExist"

diff --git a/demos/angular2-data-table2/src/app/app.component.html b/demos/angular2-data-table2/src/app/app.component.html
@@ -3,7 +3,7 @@
 
   <datatable-column name="Name">
     <template let-row="row">
-<inline-editor type="text" [(ngModel)]="row['name']" (onSave)="saveEditable(row)"></inline-editor>
+<inline-editor type="text" [size]="7" [(ngModel)]="row['name']" (onSave)="saveEditable(row)"></inline-editor>
 
     </template>
   </datatable-column>

diff --git a/src/inline-editor.component.ts b/src/inline-editor.component.ts
@@ -17,7 +17,9 @@ export interface InputConfig {
     size: number,
     min: number,
     max: number,
+    pattern: string,
     fnErrorLength: (any: any) => void,
+    fnErrorPattern: (any: any) => void
 }
 
 // TO-DO Default's value
@@ -28,8 +30,10 @@ const inputConfig: InputConfig = {
     name: '',
     size: 8,
     min: 1,
+    pattern: '',
     max: Infinity,
-    fnErrorLength: function (x) { alert('Error: Lenght!'); }
+    fnErrorLength: function (x) { alert('Error: Lenght!'); },
+    fnErrorPattern: function (x) { alert('Error: Pattern!'); }
 };
 
 
@@ -54,7 +58,7 @@ const INLINE_EDITOR_TEMPLATE = `
             <!-- inline edit control  -->
             <p [ngSwitch]="type">
                 <template [ngSwitchCase]="'text'">
-                    <input #inlineEditControl class="form-control" [(ngModel)]="value" [required]="required" [disabled]="disabled" [name]="name" [size]="size" />
+                    <input #inlineEditControl class="form-control" [(ngModel)]="value" [required]="required" [disabled]="disabled" [name]="name" [size]="size"/>
                 </template>
                 <template [ngSwitchCase]="'textarea'">
                     <textarea [rows]="rows" [cols]="cols" #inlineEditControl class="form-control" [(ngModel)]="value" [required]="required" [disabled]="disabled" ></textarea>
@@ -72,7 +76,7 @@ const INLINE_EDITOR_TEMPLATE = `
                     </select>
                 </template>
                 <template ngSwitchDefault>
-                    <input [type]="type"  #inlineEditControl class="form-control" [(ngModel)]="value" [required]="required" [disabled]="disabled" />
+                    <input [type]="type"  #inlineEditControl class="form-control" [(ngModel)]="value" [required]="required" [disabled]="disabled"  [name]="name" [size]="size"/>
                 </template>
             </p>
 
@@ -155,7 +159,8 @@ export class InlineEditorComponent implements ControlValueAccessor, OnInit, Inpu
     @Input() public min: number;
     @Input() public max: number;
     @Input() public fnErrorLength;
-
+    @Input() public pattern: string;
+    @Input() public fnErrorPattern;
 
     //textarea's attribute
     @Input() public cols: number = 50;
@@ -214,6 +219,12 @@ export class InlineEditorComponent implements ControlValueAccessor, OnInit, Inpu
         this.fnErrorLength = typeof this.fnErrorLength !== 'undefined'
             ? this.fnErrorLength
             : inputConfig.fnErrorLength;
+        this.pattern = typeof this.pattern !== 'undefined'
+            ? this.pattern
+            : inputConfig.pattern;
+        this.fnErrorPattern = typeof this.fnErrorPattern !== 'undefined'
+            ? this.fnErrorPattern
+            : inputConfig.fnErrorPattern;
 
 
         if (this.type == "select") {
@@ -276,7 +287,11 @@ export class InlineEditorComponent implements ControlValueAccessor, OnInit, Inpu
 
     // Method to display the editable value as text and emit save event to host
     onSubmit(value) {
-        if (value.length < this.min || value.length > this.max) {
+        let rExp = new RegExp(this.pattern);
+        if (!rExp.test(value)) {
+            this.fnErrorPattern();
+        }
+        else if (value.length < this.min || value.length > this.max) {
             this.fnErrorLength();
         } else {
             this.onSave.emit(value);