feat(input): add min, max and step attributes

only if type is 'number'

Author: Kamil Kisiela

src/types/input/input.js

@@ -1,16 +1,48 @@
 import template from './input.html';
+import { ngModelAttrsTransformer } from './../../helpers';
 
 export default (formlyConfigProvider) => {
+  function onlyNumberType(check) {
+    return check.shape.onlyIf(['type'], check.oneOf(['number'])).optional;
+  }
+
   formlyConfigProvider.setType({
     template,
     name: 'input',
     wrapper: ['label', 'messages', 'inputContainer'],
     defaultOptions: {
+      templateOptions: {
+        type: 'text'
+      },
       ngModelAttrs: {
         mdMaxlength: {
           bound: 'md-maxlength'
         }
       }
+    },
+    apiCheck: (check) => {
+      return {
+        templateOptions: {
+          step: onlyNumberType(check),
+          min: onlyNumberType(check),
+          max: onlyNumberType(check)
+        }
+      };
     }
   });
+
+
+  if (!angular.isArray(formlyConfigProvider.extras.fieldTransform)) {
+    formlyConfigProvider.extras.fieldTransform = [];
+  }
+
+  // add only step attribute because min and max are both built-in
+  formlyConfigProvider.extras.fieldTransform.push((fields) => {
+    return ngModelAttrsTransformer(fields, (field) => (
+      field.type === 'input' &&
+      field.templateOptions.type === 'number'
+    ), 'step', {
+      attribute: 'step'
+    });
+  });
 };

tests/types/input-spec.js

@@ -44,30 +44,122 @@ describe('formlyMaterial - input type', () => {
       $compile = _$compile_;
       $rootScope = _$rootScope_;
     });
-
-    compile();
   });
 
-  it('should be input element', () => {
-    expect(element[0].nodeName).toBe('INPUT');
-  });
+  describe('basics', () => {
+    beforeEach(() => {
+      compile();
+    });
 
-  it('should have proper type attribute', () => {
-    expect(element.attr('type')).toBe(field.templateOptions.type);
-  });
+    it('should be input element', () => {
+      expect(element[0].nodeName).toBe('INPUT');
+    });
 
-  it('should have messages wrapper', () => {
-    expect(form.find('[ng-messages]').length).toBe(1);
-  });
+    it('should have proper type attribute', () => {
+      expect(element.attr('type')).toBe(field.templateOptions.type);
+    });
 
-  it('should have label wrapper', () => {
-    const label = form.find('label');
+    it('should have messages wrapper', () => {
+      expect(form.find('[ng-messages]').length).toBe(1);
+    });
+
+    it('should have label wrapper', () => {
+      const label = form.find('label');
+
+      expect(label.length).toBe(1);
+      expect(label.html()).toContain(field.templateOptions.label);
+    });
 
-    expect(label.length).toBe(1);
-    expect(label.html()).toContain(field.templateOptions.label);
+    it('should have inputContainer wrapper', () => {
+      expect(form.find('md-input-container').length).toBe(1);
+    });
   });
 
-  it('should have inputContainer wrapper', () => {
-    expect(form.find('md-input-container').length).toBe(1);
+  describe('number type specific', () => {
+    describe('step attribute', () => {
+      it('should fail on non number type', () => {
+        expect(() => {
+          compile({
+            templateOptions: {
+              type: 'text',
+              step: 2
+            },
+            apiCheckFunction: 'throw'
+          });
+        }).toThrowError(Error, /step/i);
+      });
+
+      it('should not be available on non number type', () => {
+        compile({
+          templateOptions: {
+            type: 'text',
+            step: 2
+          }
+        });
+
+        expect(element.attr('step')).toBeUndefined();
+      });
+
+      it('should be available on number type', () => {
+        compile({
+          templateOptions: {
+            type: 'number',
+            step: 2
+          }
+        });
+
+        expect(parseInt(element.attr('step'))).toEqual(field.templateOptions.step);
+      });
+    });
+
+    describe('min attribute', () => {
+      it('should fail on non number type', () => {
+        expect(() => {
+          compile({
+            templateOptions: {
+              type: 'text',
+              min: 2
+            },
+            apiCheckFunction: 'throw'
+          });
+        }).toThrowError(Error, /min/i);
+      });
+
+      it('should be available on number type', () => {
+        compile({
+          templateOptions: {
+            type: 'number',
+            min: 2
+          }
+        });
+
+        expect(parseInt(element.attr('min'))).toEqual(field.templateOptions.min);
+      });
+    });
+
+    describe('max attribute', () => {
+      it('should fail on non number type', () => {
+        expect(() => {
+          compile({
+            templateOptions: {
+              type: 'text',
+              max: 2
+            },
+            apiCheckFunction: 'throw'
+          });
+        }).toThrowError(Error, /max/i);
+      });
+
+      it('should be available on number type', () => {
+        compile({
+          templateOptions: {
+            type: 'number',
+            max: 2
+          }
+        });
+
+        expect(parseInt(element.attr('max'))).toEqual(field.templateOptions.max);
+      });
+    });
   });
 });