iglooform 2.5.8 → 2.5.11

package/es/form/element/index.js

@@ -151,26 +151,6 @@ var Element = function Element(_ref) {
   var _useBreakpoint = useBreakpoint(),
       md = _useBreakpoint.md;
 
-  if (type === 'Section') {
-    return _jsx(Section, {
-      parentName: parentName,
-      config: config,
-      preview: preview,
-      disabled: disabled,
-      setShowStepButton: setShowStepButton
-    });
-  }
-
-  if (type === 'AddableSection') {
-    return _jsx(AddableSection, {
-      parentName: parentName,
-      config: config,
-      preview: preview,
-      disabled: disabled,
-      setShowStepButton: setShowStepButton
-    });
-  }
-
   var _calcFormItemProps = calcFormItemProps(config, _objectSpread(_objectSpread({}, extraConfig), {}, {
     requiredMark: requiredMark
   }), form, parentName),
@@ -235,7 +215,28 @@ var Element = function Element(_ref) {
       name: formItemProps.name,
       value: formItemProps.initialValue
     }]);
-  }, [formItemProps.initialValue]); //这里要想一下有没有更优雅的实现方式
+  }, [formItemProps.initialValue]);
+
+  if (type === 'Section') {
+    return _jsx(Section, {
+      parentName: parentName,
+      config: config,
+      preview: preview,
+      disabled: disabled,
+      setShowStepButton: setShowStepButton
+    });
+  }
+
+  if (type === 'AddableSection') {
+    return _jsx(AddableSection, {
+      parentName: parentName,
+      config: config,
+      preview: preview,
+      disabled: disabled,
+      setShowStepButton: setShowStepButton
+    });
+  } //这里要想一下有没有更优雅的实现方式
+
 
   if (withoutForm) {
     var hideWhenPreview = elementProps.hideWhenPreview,

package/es/form/elements.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import Button from '../button';
 import Radio, { RadioGroup, RadioGroupWithOther } from '../radio';
-import Input, { PhoneNumber, Amount, Email, Password, InputNumber, TextArea, InputDate, CreditCard, Otp, ExpiryDate } from '../input';
+import Input, { PhoneNumber, Amount, Email, Password, InputNumber, TextArea, InputDate, CreditCard, Otp, ExpiryDate, InputId } from '../input';
 import DatePicker, { IglooBuddhistDatePicker as BuddhistDatePicker, IglooRangePicker as RangePicker, IglooWeekPicker as WeekPicker, IglooMonthPicker as MonthPicker } from '../date-picker';
 import Confirmation from '../confirmation';
 import { AttachedSelect as Select, TimeSelect } from '../select';
@@ -18,6 +18,7 @@ var elementMap = {
   PhoneNumber: PhoneNumber,
   Amount: Amount,
   InputNumber: InputNumber,
+  InputId: InputId,
   TextArea: TextArea,
   DatePicker: DatePicker,
   CreditCard: CreditCard,

package/es/form/hstep/index.js

@@ -74,14 +74,23 @@ var Step = function Step(_ref) {
       md = _useBreakpoint.md;
 
   useEffect(function () {
-    var _containerRef$current, _containerRef$current2, _containerRef$current3;
+    var _containerRef$current, _containerRef$current4;
 
     if (md || !(shouldScroll && edit)) return;
     var scrollContainer = getScrollContainer() || window;
-    (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetTop) ? scrollContainer.scrollTo({
-      top: (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetTop) - 50,
-      behavior: 'smooth'
-    }) : containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.scrollIntoView();
+    if (typeof scrollContainer.scrollTo !== 'function') return;
+
+    if (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetTop) {
+      var _containerRef$current2, _containerRef$current3;
+
+      scrollContainer.scrollTo.length === 2 ? scrollContainer.scrollTo(0, (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetTop) - 50) : scrollContainer.scrollTo({
+        top: (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetTop) - 50,
+        behavior: 'smooth'
+      });
+      return;
+    }
+
+    containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.scrollIntoView();
   }, [shouldScroll, edit]);
   return _jsxs(_Fragment, {
     children: [_jsxs("div", {

package/es/form/hstep/style/index.less

@@ -2,7 +2,7 @@
   width: 100%;
   background: #ffffff;
   padding: 32px;
-  margin-top: 16px;
+  margin-top: 32px;
 
   .igloo-hstep-label {
     display: flex;
@@ -47,6 +47,7 @@
   .igloo-hstep-container {
     width: 100%;
     padding: 24px 16px;
+    margin-top: 0;
 
     .igloo-hstep-content {
       margin-top: 24px;
@@ -59,12 +60,6 @@
       margin-left: 16px;
       margin-right: 16px;
     }
-
-    .igloo-hstep-label {
-      margin-bottom: 8px;
-      font-size: 16px;
-      line-height: 24px;
-    }
   }
 
   .igloo-hstep-button-container {

package/es/form/hsteps/index.d.ts

@@ -3,11 +3,17 @@ import { FormItemConfig, FormItemName } from '../../types';
 import './style/index.less';
 import { ConfirmationProps } from '../../confirmation';
 export interface HStepsProps {
-    config: FormItemConfig;
+    config: FormItemConfig & {
+        confirmations?: {
+            [key: string]: {
+                required: boolean;
+                confirmation?: ConfirmationProps;
+            };
+        };
+        withReview?: boolean;
+    };
     parentName?: FormItemName;
     name?: FormItemName;
-    withReview?: boolean;
-    confirmation?: ConfirmationProps;
 }
 declare const HSteps: FC<HStepsProps>;
 export default HSteps;

package/es/form/hsteps/index.js

@@ -49,8 +49,7 @@ var useBreakpoint = _Grid.useBreakpoint;
 var HSteps = function HSteps(_ref) {
   var _renderElements$curre2, _renderElements$curre3;
 
-  var name = _ref.name,
-      parentName = _ref.parentName,
+  var parentName = _ref.parentName,
       _ref$config = _ref.config,
       _ref$config$elements = _ref$config.elements,
       elements = _ref$config$elements === void 0 ? [] : _ref$config$elements,
@@ -58,10 +57,10 @@ var HSteps = function HSteps(_ref) {
       currentStep = _ref$config$currentSt === void 0 ? 0 : _ref$config$currentSt,
       subscribedFields = _ref$config.subscribedFields,
       onEdit = _ref$config.onEdit,
-      _ref$withReview = _ref.withReview,
-      withReview = _ref$withReview === void 0 ? true : _ref$withReview,
-      _ref$confirmation = _ref.confirmation,
-      confirmation = _ref$confirmation === void 0 ? {} : _ref$confirmation;
+      confirmations = _ref$config.confirmations,
+      _ref$config$withRevie = _ref$config.withReview,
+      withReview = _ref$config$withRevie === void 0 ? true : _ref$config$withRevie,
+      name = _ref$config.name;
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -235,6 +234,13 @@ var HSteps = function HSteps(_ref) {
             'igloo-hsteps-bar-item': true,
             'igloo-hsteps-bar-item-current': index === current
           }),
+          style: {
+            cursor: index < current ? 'pointer' : 'default'
+          },
+          onClick: function onClick() {
+            if (index >= current) return;
+            setCurrent(index);
+          },
           children: [index < current && _jsx(SuccessFilled, {
             className: 'igloo-hsteps-bar-item-icon'
           }), _jsx(Typography, {
@@ -259,9 +265,7 @@ var HSteps = function HSteps(_ref) {
         })]
       })]
     }), _jsxs("div", {
-      className: classNames({
-        'igloo-hsteps-content': !md
-      }),
+      className: "igloo-hsteps-content",
       children: [current < renderElements.length && _jsx(StepContext.Provider, {
         value: {
           registerSection: registerSection
@@ -278,10 +282,14 @@ var HSteps = function HSteps(_ref) {
           shouldScroll: shouldScroll
         }, ((_renderElements$curre2 = renderElements[current]) === null || _renderElements$curre2 === void 0 ? void 0 : _renderElements$curre2.key) || ((_renderElements$curre3 = renderElements[current]) === null || _renderElements$curre3 === void 0 ? void 0 : _renderElements$curre3.name))
       }), current === renderElements.length && _jsxs("div", {
-        className: "igloo-hstep-container",
+        className: "igloo-hsteps-confirmation-container",
         children: [withReview && !md && _jsxs(Typography, {
           className: "igloo-hstep-label",
           level: "h3a",
+          style: {
+            display: 'flex',
+            justifyContent: 'space-between'
+          },
           children: [_jsx("span", {
             className: "igloo-hstep-label-text",
             children: formatMessage({
@@ -305,8 +313,8 @@ var HSteps = function HSteps(_ref) {
           }, (step === null || step === void 0 ? void 0 : step.key) || (step === null || step === void 0 ? void 0 : step.name));
         }), _jsxs("div", {
           className: "igloo-hsteps-confirmation",
-          children: [md && _jsx(Typography, {
-            level: "h3a",
+          children: [_jsx(Typography, {
+            level: md ? 'h3a' : 'h4',
             wrapElement: "div",
             children: formatMessage({
               id: 'Review and Submit'
@@ -329,7 +337,7 @@ var HSteps = function HSteps(_ref) {
             children: formatMessage({
               id: 'Once you’re happy with the above, and you’ve checked the box below, please go ahead and submit your activation.'
             })
-          }), _jsx(_Divider, {}), _jsx(_Form.Item, {
+          }), _jsx(_Divider, {}), !confirmations && _jsx(_Form.Item, {
             name: calcNamePath(parentName, 'confirmation'),
             rules: [{
               validator: function validator(_, value) {
@@ -345,7 +353,33 @@ var HSteps = function HSteps(_ref) {
             style: {
               margin: 0
             },
-            children: _jsx(Confirmation, _objectSpread({}, confirmation))
+            children: _jsx(Confirmation, {})
+          }), confirmations && Object.entries(confirmations).map(function (_ref6) {
+            var _ref7 = _slicedToArray(_ref6, 2),
+                key = _ref7[0],
+                _ref7$ = _ref7[1],
+                required = _ref7$.required,
+                _ref7$$confirmation = _ref7$.confirmation,
+                confirmation = _ref7$$confirmation === void 0 ? {} : _ref7$$confirmation;
+
+            return _jsx(_Form.Item, {
+              name: calcNamePath(parentName, key),
+              rules: [{
+                validator: function validator(_, value) {
+                  if (required && !value) {
+                    return Promise.reject(formatMessage({
+                      id: 'Please read and agree to Igloo Terms of Use and Privacy Policy'
+                    }));
+                  }
+
+                  return Promise.resolve();
+                }
+              }],
+              style: {
+                margin: 0
+              },
+              children: _jsx(Confirmation, _objectSpread({}, confirmation))
+            });
           }), showSubmitButton && md && _jsx(_Form.Item, {
             style: {
               marginBottom: 0

package/es/form/hsteps/style/index.less

@@ -29,6 +29,12 @@
       width: 100%;
     }
 
+    .igloo-hsteps-confirmation-container {
+      background: #f9f9f9;
+      padding: 0;
+      margin: 0;
+    }
+
     .igloo-hsteps-button {
       margin-top: 24px;
       min-width: 221px;
@@ -38,7 +44,7 @@
       width: 100%;
       padding: 32px;
       background: #ffffff;
-      margin-top: 16px;
+      margin-top: 32px;
       border-radius: 3px;
     }
   }
@@ -49,8 +55,30 @@
     .igloo-hsteps-content {
       width: 100%;
 
-      .igloo-hsteps-confirmation {
-        padding: 16px;
+      .igloo-hsteps-confirmation-container {
+        background: #ffffff;
+        padding: 24px 16px;
+
+        .igloo-hsteps-confirmation {
+          padding: 16px;
+          margin-top: 8px;
+        }
+
+        .igloo-hstep-container {
+          width: 100%;
+          padding: 16px;
+          border-radius: 10px;
+
+          &:not(:first-child) {
+            margin-top: 24px;
+          }
+
+          .igloo-hstep-label {
+            margin-bottom: 8px;
+            font-size: 16px;
+            line-height: 24px;
+          }
+        }
       }
     }
 

package/es/form/pages/index.js

@@ -32,9 +32,9 @@ import Typography from '../../typography';
 var useBreakpoint = _Grid.useBreakpoint;
 
 var Pages = function Pages(_ref) {
-  var name = _ref.name,
-      parentName = _ref.parentName,
+  var parentName = _ref.parentName,
       _ref$config = _ref.config,
+      name = _ref$config.name,
       _ref$config$elements = _ref$config.elements,
       elements = _ref$config$elements === void 0 ? [] : _ref$config$elements,
       subscribedFields = _ref$config.subscribedFields;

package/es/form/section/style/index.less

@@ -11,6 +11,10 @@
     margin-top: 16px;
   }
 
+  .igloo-section-collapse-divider {
+    margin-bottom: 0;
+  }
+
   &:last-child {
     .igloo-section-collapse-divider {
       display: none;

package/es/form/step/index.js

@@ -77,14 +77,23 @@ var Step = function Step(_ref) {
       md = _useBreakpoint.md;
 
   useEffect(function () {
-    var _containerRef$current, _containerRef$current2, _containerRef$current3;
+    var _containerRef$current, _containerRef$current4;
 
     if (md || !(shouldScroll && edit)) return;
     var scrollContainer = getScrollContainer() || window;
-    (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetTop) ? scrollContainer.scrollTo({
-      top: (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetTop) - 50,
-      behavior: 'smooth'
-    }) : containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.scrollIntoView();
+    if (typeof scrollContainer.scrollTo !== 'function') return;
+
+    if (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetTop) {
+      var _containerRef$current2, _containerRef$current3;
+
+      scrollContainer.scrollTo.length === 2 ? scrollContainer.scrollTo(0, (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetTop) - 50) : scrollContainer.scrollTo({
+        top: (containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetTop) - 50,
+        behavior: 'smooth'
+      });
+      return;
+    }
+
+    containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.scrollIntoView();
   }, [shouldScroll, edit]);
   var displayTotal = showLastIndex ? total : total - 1;
   return _jsxs("div", {

package/es/form/steps/index.js

@@ -24,9 +24,9 @@ import './style/index.less';
 import invariant from 'invariant';
 
 var Steps = function Steps(_ref) {
-  var name = _ref.name,
-      parentName = _ref.parentName,
+  var parentName = _ref.parentName,
       _ref$config = _ref.config,
+      name = _ref$config.name,
       _ref$config$elements = _ref$config.elements,
       elements = _ref$config$elements === void 0 ? [] : _ref$config$elements,
       _ref$config$showLastI = _ref$config.showLastIndex,

package/es/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Form } from './form';
 export { default as Button, GreenButton, YellowButton, RedButton, } from './button';
 export { default as DatePicker, IglooBuddhistDatePicker as BuddhistDatePicker, IglooRangePicker as RangePicker, IglooWeekPicker as WeekPicker, IglooMonthPicker as MonthPicker, } from './date-picker';
-export { default as Input, PhoneNumber, Amount, Password, Email, InputNumber, TextArea, InputDate, CreditCard, ExpiryDate, } from './input';
+export { default as Input, PhoneNumber, Amount, Password, Email, InputNumber, TextArea, InputDate, CreditCard, ExpiryDate, InputId, } from './input';
 export { default as Select, TimeSelect, AttachedSelect } from './select';
 export { default as Radio, RadioGroup, RadioGroupWithOther } from './radio';
 export { default as Example } from './example';

package/es/index.js

@@ -1,7 +1,7 @@
 export { default as Form } from './form';
 export { default as Button, GreenButton, YellowButton, RedButton } from './button';
 export { default as DatePicker, IglooBuddhistDatePicker as BuddhistDatePicker, IglooRangePicker as RangePicker, IglooWeekPicker as WeekPicker, IglooMonthPicker as MonthPicker } from './date-picker';
-export { default as Input, PhoneNumber, Amount, Password, Email, InputNumber, TextArea, InputDate, CreditCard, ExpiryDate } from './input';
+export { default as Input, PhoneNumber, Amount, Password, Email, InputNumber, TextArea, InputDate, CreditCard, ExpiryDate, InputId } from './input';
 export { default as Select, TimeSelect, AttachedSelect } from './select';
 export { default as Radio, RadioGroup, RadioGroupWithOther } from './radio';
 export { default as Example } from './example';

package/es/input/index.d.ts

@@ -8,5 +8,6 @@ export { default as InputDate } from './input-date';
 export { default as CreditCard } from './credit-card';
 export { default as Otp } from './otp';
 export { default as ExpiryDate } from './expiry-date';
+export { default as InputId } from './input-id';
 import IglooInput from './input';
 export default IglooInput;

package/es/input/index.js

@@ -8,5 +8,6 @@ export { default as InputDate } from './input-date';
 export { default as CreditCard } from './credit-card';
 export { default as Otp } from './otp';
 export { default as ExpiryDate } from './expiry-date';
+export { default as InputId } from './input-id';
 import IglooInput from './input';
 export default IglooInput;

package/es/input/input-id.d.ts

@@ -0,0 +1,6 @@
+import { InputProps } from 'antd/es/input';
+import { FC, IglooComponentProps } from '../types';
+import './style/index.less';
+declare type Props = InputProps & IglooComponentProps;
+declare const InputId: FC<Props>;
+export default InputId;

package/es/input/input-id.js

@@ -0,0 +1,112 @@
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import omit from 'omit.js';
+import formMethods from '../utils/form-methods';
+import { staticFormatMessage as formatMessage } from '../locale';
+import './style/index.less';
+
+var InputId = function InputId(props) {
+  return _jsx(_Input, _objectSpread(_objectSpread({
+    className: "igloo-input"
+  }, omit(props, formMethods)), {}, {
+    type: "number"
+  }));
+};
+
+InputId.formItemPropsHandler = function (config) {
+  var length = config.length,
+      maxLength = config.maxLength,
+      minLength = config.minLength,
+      label = config.label,
+      idType = config.idType;
+  var rules = [];
+
+  if (length !== undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length === length) return Promise.resolve();
+        return Promise.reject(formatMessage({
+          id: '{label} must be {length} digits.',
+          values: {
+            length: length,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
+  if (maxLength !== undefined && minLength !== undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length >= minLength && String(value).length <= maxLength) return Promise.resolve();
+        return Promise.reject(formatMessage({
+          id: '{label} must be {minLength} - {maxLength} digits.',
+          values: {
+            maxLength: maxLength,
+            minLength: minLength,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
+  if (maxLength !== undefined && minLength === undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length <= maxLength) return Promise.resolve();
+        return Promise.reject(formatMessage({
+          id: '{label} must be less than {maxLength} digits.',
+          values: {
+            maxLength: maxLength,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
+  if (maxLength === undefined && minLength !== undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length >= minLength) return Promise.resolve();
+        return Promise.reject(formatMessage({
+          id: '{label} must be at least {minLength} digits.',
+          values: {
+            minLength: minLength,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
+  if (idType === 'KTP') {
+    rules.push({
+      validator: function validator(rule, value) {
+        if (!/^((1[1-9])|(21)|([37][1-6])|(5[1-4])|(6[1-5])|([8-9][1-2]))[0-9]{4}(([0-6][0-9])|(7[0-1]))((0[1-9])|(1[0-2]))[0-9]{6}$/.test(value)) {
+          return Promise.reject(formatMessage({
+            id: 'Invalid KTP Number.'
+          }));
+        }
+
+        return Promise.resolve();
+      }
+    });
+  }
+
+  return {
+    rules: rules
+  };
+};
+
+export default InputId;

package/es/input/input-number.js

@@ -10,6 +10,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import { jsx as _jsx } from "react/jsx-runtime";
 import omit from 'omit.js';
 import formMethods from '../utils/form-methods';
+import { staticFormatMessage } from '../locale';
 import './style/index.less';
 
 var IglooInputNumber = function IglooInputNumber(props) {
@@ -39,6 +40,74 @@ var IglooInputNumber = function IglooInputNumber(props) {
 };
 
 IglooInputNumber.formItemPropsHandler = function (config) {
+  var length = config.length,
+      maxLength = config.maxLength,
+      minLength = config.minLength,
+      label = config.label,
+      idType = config.idType;
+  var rules = [];
+
+  if (length !== undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length === length) return Promise.resolve();
+        return Promise.reject(staticFormatMessage({
+          id: '{label} must be {length} digits.',
+          values: {
+            length: length,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
+  if (maxLength !== undefined && minLength !== undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length >= minLength && String(value).length <= maxLength) return Promise.resolve();
+        return Promise.reject(staticFormatMessage({
+          id: '{label} must be {minLength} - {maxLength} digits.',
+          values: {
+            maxLength: maxLength,
+            minLength: minLength,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
+  if (maxLength !== undefined && minLength === undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length <= maxLength) return Promise.resolve();
+        return Promise.reject(staticFormatMessage({
+          id: '{label} must be less than {maxLength} digits.',
+          values: {
+            maxLength: maxLength,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
+  if (maxLength === undefined && minLength !== undefined) {
+    rules.push({
+      validator: function validator(_, value) {
+        if (value === undefined || value === null || String(value).length >= minLength) return Promise.resolve();
+        return Promise.reject(staticFormatMessage({
+          id: '{label} must be at least {minLength} digits.',
+          values: {
+            minLength: minLength,
+            label: label
+          }
+        }));
+      }
+    });
+  }
+
   return {
     getValueFromEvent: function getValueFromEvent(e) {
       var value = e.target.value;
@@ -49,7 +118,8 @@ IglooInputNumber.formItemPropsHandler = function (config) {
       }
 
       return str ? parseFloat(str) : undefined;
-    }
+    },
+    rules: rules
   };
 };