Merge pull request #203 from paullryan/issue-201

Add support step in textfields
mseemann · Nov 14, 2016 · 4c03663 · 4c03663
2 parents 26bd53e + bff2482
commit 4c03663
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/src/demo-app/app/textfield/textfield.component.html b/src/demo-app/app/textfield/textfield.component.html
@@ -77,6 +77,36 @@ <h5>Text/Numeric with floating label</h5>
   ]]>
 </pre>
 
+<h5>Number with min and step restrictions</h5>
+
+<mdl-textfield
+        name="number1"
+        type="number"
+        label="Number..."
+        min="0"
+        step="0.01"
+        error-msg="Input is not a number!"
+        [(ngModel)]="number1"
+        floating-label ></mdl-textfield>
+
+<br/>
+{{number1}}
+
+<pre prism>
+  <![CDATA[
+<mdl-textfield
+        name="number1"
+        type="number"
+        label="Number..."
+        min="0"
+        step="0.01"
+        error-msg="Input is not a number!"
+        [(ngModel)]="number1"
+        floating-label ></mdl-textfield>
+  ]]>
+</pre>
+
+
 <h5>Multiline Textfield</h5>
 aka Textarea. Add the attribute row to turn the input field to a textarea. Specify maxrows to restrict the
 possible lines.<br/>
@@ -173,6 +203,12 @@ <h5>Attributes of the mdl-textfield component</h5>
      <td>Restrict the value for type number to a min value.</td>
    </tr>
 
+   <tr>
+     <td>step</td>
+     <td>Restrict the value for type number to a be based on the given step (e.g. 0.01
+       for numbers with two decimal places).</td>
+   </tr>
+
    <tr>
      <td>ngModel</td>
      <td>The text field is ngModel compatible.</td>

diff --git a/src/lib/components/textfield/mdl-textfield.component.spec.ts b/src/lib/components/textfield/mdl-textfield.component.spec.ts
@@ -138,6 +138,27 @@ describe('Component: MdlTextField', () => {
     });
   }));
 
+
+  it('should mark the component as invalid ngModel (step)', async(() => {
+
+    TestBed.overrideComponent(MdlTestComponent, { set: {
+      template: '<mdl-textfield type="number" label="Text..." [(ngModel)]="text1" min="0" step="1"></mdl-textfield>' }
+    });
+    let fixture = TestBed.createComponent(MdlTestComponent);
+    fixture.detectChanges();
+
+    let hostEl: HTMLElement = fixture.debugElement.query(By.directive(MdlTextFieldComponent)).nativeElement;
+    let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
+
+    el.value = '0.1';
+    fixture.detectChanges();
+
+    fixture.whenStable().then( () => {
+      expect(hostEl.classList.contains('is-invalid')).toBe(true);
+    });
+  }));
+
+
   it('should create a textarea if row is specified', () => {
 
     TestBed.overrideComponent(MdlTestComponent, { set: {

diff --git a/src/lib/components/textfield/mdl-textfield.component.ts b/src/lib/components/textfield/mdl-textfield.component.ts
@@ -76,6 +76,7 @@ const IS_DIRTY = 'is-dirty';
         [pattern]="pattern ? pattern : '.*'"
         [attr.min]="min"
         [attr.max]="max"
+        [attr.step]="step"
         [placeholder]="placeholder ? placeholder : ''"
         [autocomplete]="autocomplete ? autocomplete : ''"
         (focus)="onFocus($event)"
@@ -102,6 +103,7 @@ const IS_DIRTY = 'is-dirty';
           [pattern]="pattern ? pattern : '.*'"
           [attr.min]="min"
           [attr.max]="max"
+          [attr.step]="step"
           [placeholder]="placeholder ? placeholder : ''"
           [autocomplete]="autocomplete ? autocomplete : ''"
           (focus)="onFocus($event)"
@@ -146,6 +148,7 @@ export class MdlTextFieldComponent implements ControlValueAccessor, OnChanges, D
   @Input() public pattern;
   @Input() public min;
   @Input() public max;
+  @Input() public step;
   @Input() public name;
   @Input() public id = `mdl-textfield-${nextId++}`;
   @Input('error-msg') public errorMessage;