@hi-ui/form 4.0.0-beta.30 → 4.0.0-beta.33

package/lib/cjs/Form.js

@@ -60,9 +60,11 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       placement = _a$placement === void 0 ? 'vertical' : _a$placement,
       _a$contentPosition = _a.contentPosition,
       contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
+      _a$showRequiredOnVali = _a.showRequiredOnValidateRequired,
+      showRequiredOnValidateRequired = _a$showRequiredOnVali === void 0 ? false : _a$showRequiredOnVali,
       _a$showColon = _a.showColon,
       showColon = _a$showColon === void 0 ? true : _a$showColon,
-      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showColon"]);
+      rest = tslib.__rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon"]);
 
   var formContext = useForm.useForm(rest);
   var getRootProps = formContext.getRootProps; // @ts-ignore
@@ -87,11 +89,12 @@ var Form = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       labelWidth: labelWidth,
       labelPlacement: labelPlacement,
       showColon: showColon,
-      contentPosition: contentPosition
+      contentPosition: contentPosition,
+      showRequiredOnValidateRequired: showRequiredOnValidateRequired
     }, formContext), {
       prefixCls: prefixCls
     });
-  }, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition]);
+  }, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition, showRequiredOnValidateRequired]);
   var cls = classname.cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
   return (
     /*#__PURE__*/

package/lib/cjs/FormItem.js

@@ -21,6 +21,8 @@ var React = require('react');
 
 var env = require('@hi-ui/env');
 
+var useFormField = require('./use-form-field.js');
+
 var FormLabel = require('./FormLabel.js');
 
 var FormMessage = require('./FormMessage.js');
@@ -55,13 +57,29 @@ var FormItem = function FormItem(_a) {
       valueConnectTransform = _a.valueConnectTransform,
       validateTrigger = _a.validateTrigger,
       render = _a.render,
-      rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]); // @ts-ignore
-
+      rest = tslib.__rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
 
   var _useFormContext = context.useFormContext(),
-      prefixCls = _useFormContext.prefixCls;
+      prefixCls = _useFormContext.prefixCls,
+      showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired;
 
+  var fieldRules = useFormField.useFiledRules({
+    field: field,
+    rules: rules,
+    valueType: valueType
+  });
+  var required = rest.required;
+  var showRequired = React.useMemo(function () {
+    if (required === undefined) {
+      return showRequiredOnValidateRequired && fieldRules.some(function (item) {
+        return item.required;
+      });
+    }
+
+    return required;
+  }, [required, showRequiredOnValidateRequired, fieldRules]);
   return /*#__PURE__*/React__default["default"].createElement(FormLabel.FormLabel, Object.assign({}, rest, {
+    required: showRequired,
     className: classname.cx(prefixCls + "-item", className)
   }), /*#__PURE__*/React__default["default"].createElement(FormField.FormField, {
     field: field,

package/lib/cjs/styles/index.scss.js

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
+var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
 
 var __styleInject__ = require('inject-head-style')["default"];
 

package/lib/cjs/use-form-field.js

@@ -35,17 +35,14 @@ function _interopDefaultLegacy(e) {
 
 var Validater__default = /*#__PURE__*/_interopDefaultLegacy(Validater);
 
-var useFormField = function useFormField(props) {
+var useFiledRules = function useFiledRules(props) {
   var field = props.field,
       rulesProp = props.rules,
       _props$valueType = props.valueType,
       valueType = _props$valueType === void 0 ? 'any' : _props$valueType;
 
   var _useFormContext = context.useFormContext(),
-      getFieldRules = _useFormContext.getFieldRules,
-      getFieldProps = _useFormContext.getFieldProps,
-      registerField = _useFormContext.registerField,
-      unregisterField = _useFormContext.unregisterField;
+      getFieldRules = _useFormContext.getFieldRules;
   /**
    * 处理校验规则，item 优先级大于 form
    */
@@ -59,7 +56,19 @@ var useFormField = function useFormField(props) {
         type: valueType
       }, rule);
     });
-  }, [rulesProp, field, getFieldRules, valueType]); // 当前 field 的唯一校验器
+  }, [rulesProp, field, getFieldRules, valueType]);
+  return fieldRules;
+};
+
+var useFormField = function useFormField(props) {
+  var field = props.field;
+
+  var _useFormContext2 = context.useFormContext(),
+      getFieldProps = _useFormContext2.getFieldProps,
+      registerField = _useFormContext2.registerField,
+      unregisterField = _useFormContext2.unregisterField;
+
+  var fieldRules = useFiledRules(props); // 当前 field 的唯一校验器
 
   var fieldValidate = React.useCallback(function (value) {
     var _Validater, _validater$validate;
@@ -89,4 +98,5 @@ var useFormField = function useFormField(props) {
   return getFieldProps(props);
 };
 
+exports.useFiledRules = useFiledRules;
 exports.useFormField = useFormField;

package/lib/cjs/use-form.js

@@ -48,6 +48,8 @@ var EMPTY_ERRORS = {};
 var EMPTY_TOUCHED = {};
 var DEFAULT_VALIDATE_TRIGGER = ['onChange', 'onBlur'];
 
+var EMPTY_FUNC = function EMPTY_FUNC() {};
+
 var useForm = function useForm(_a) {
   var initialValues = _a.initialValues,
       _a$initialErrors = _a.initialErrors,
@@ -181,11 +183,8 @@ var useForm = function useForm(_a) {
                   type: 'SET_VALIDATING',
                   payload: false
                 }); // @ts-ignore
-                // @ts-ignore
-
-                setFieldError(field, (_c = (_b = (_a = errorMsg.fields[index.stringify(field)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : ''); // TODO: 回调和promise支持
-                // TODO: 回调和promise支持
 
+                setFieldError(field, (_c = (_b = (_a = errorMsg.fields[index.stringify(field)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : '');
                 throw errorMsg;
               }));
 
@@ -320,7 +319,7 @@ var useForm = function useForm(_a) {
     var shouldValidateField = validateAfterTouched ? objectUtils.getNested(formState.touched, field) && shouldValidate : shouldValidate;
 
     if (shouldValidateField) {
-      validateField(field, value);
+      validateField(field, value)["catch"](EMPTY_FUNC);
     }
   }, [validateField, validateAfterTouched, formState]);
   var setFieldsValue = React.useCallback(function (fieldsState) {
@@ -375,7 +374,7 @@ var useForm = function useForm(_a) {
   var handleFieldBlur = React.useCallback(function (fieldName, shouldValidate) {
     return function (evt) {
       if (shouldValidate) {
-        validateFieldState(fieldName);
+        validateFieldState(fieldName)["catch"](EMPTY_FUNC);
       }
 
       setFieldTouched(fieldName, true);
@@ -383,7 +382,7 @@ var useForm = function useForm(_a) {
   }, [setFieldTouched, validateFieldState]);
   var handleFieldTrigger = React.useCallback(function (fieldName) {
     return function (evt) {
-      validateFieldState(fieldName);
+      validateFieldState(fieldName)["catch"](EMPTY_FUNC);
     };
   }, [validateFieldState]);
   /**
@@ -482,7 +481,6 @@ var useForm = function useForm(_a) {
                     formDispatch({
                       type: 'SUBMIT_DONE'
                     }); // return combinedErrors
-                    // return combinedErrors
 
                     return formState.values;
                   }
@@ -492,8 +490,6 @@ var useForm = function useForm(_a) {
                       type: 'SUBMIT_DONE'
                     }); // return result
                     // TODO: 满足promise 如果既给到values 又给到 errors
-                    // return result
-                    // TODO: 满足promise 如果既给到values 又给到 errors
 
                     return formState.values;
                   })["catch"](function (_errors) {

package/lib/esm/Form.js

@@ -38,9 +38,11 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
       placement = _a$placement === void 0 ? 'vertical' : _a$placement,
       _a$contentPosition = _a.contentPosition,
       contentPosition = _a$contentPosition === void 0 ? 'center' : _a$contentPosition,
+      _a$showRequiredOnVali = _a.showRequiredOnValidateRequired,
+      showRequiredOnValidateRequired = _a$showRequiredOnVali === void 0 ? false : _a$showRequiredOnVali,
       _a$showColon = _a.showColon,
       showColon = _a$showColon === void 0 ? true : _a$showColon,
-      rest = __rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showColon"]);
+      rest = __rest(_a, ["prefixCls", "role", "className", "children", "innerRef", "labelWidth", "labelPlacement", "placement", "contentPosition", "showRequiredOnValidateRequired", "showColon"]);
 
   var formContext = useForm(rest);
   var getRootProps = formContext.getRootProps; // @ts-ignore
@@ -65,11 +67,12 @@ var Form = /*#__PURE__*/forwardRef(function (_a, ref) {
       labelWidth: labelWidth,
       labelPlacement: labelPlacement,
       showColon: showColon,
-      contentPosition: contentPosition
+      contentPosition: contentPosition,
+      showRequiredOnValidateRequired: showRequiredOnValidateRequired
     }, formContext), {
       prefixCls: prefixCls
     });
-  }, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition]);
+  }, [labelWidth, formContext, labelPlacement, showColon, prefixCls, contentPosition, showRequiredOnValidateRequired]);
   var cls = cx(prefixCls, className, placement && prefixCls + "--placement-" + placement);
   return (
     /*#__PURE__*/

package/lib/esm/FormItem.js

@@ -8,8 +8,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { __DEV__ } from '@hi-ui/env';
+import { useFiledRules } from './use-form-field.js';
 import { FormLabel } from './FormLabel.js';
 import { FormMessage } from './FormMessage.js';
 import { FormField } from './FormField.js';
@@ -31,13 +32,29 @@ var FormItem = function FormItem(_a) {
       valueConnectTransform = _a.valueConnectTransform,
       validateTrigger = _a.validateTrigger,
       render = _a.render,
-      rest = __rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]); // @ts-ignore
-
+      rest = __rest(_a, ["className", "children", "field", "valueType", "rules", "valuePropName", "valueChangeFuncPropName", "valueDispatchTransform", "valueConnectTransform", "validateTrigger", "render"]);
 
   var _useFormContext = useFormContext(),
-      prefixCls = _useFormContext.prefixCls;
+      prefixCls = _useFormContext.prefixCls,
+      showRequiredOnValidateRequired = _useFormContext.showRequiredOnValidateRequired;
+
+  var fieldRules = useFiledRules({
+    field: field,
+    rules: rules,
+    valueType: valueType
+  });
+  var required = rest.required;
+  var showRequired = useMemo(function () {
+    if (required === undefined) {
+      return showRequiredOnValidateRequired && fieldRules.some(function (item) {
+        return item.required;
+      });
+    }
 
+    return required;
+  }, [required, showRequiredOnValidateRequired, fieldRules]);
   return /*#__PURE__*/React.createElement(FormLabel, Object.assign({}, rest, {
+    required: showRequired,
     className: cx(prefixCls + "-item", className)
   }), /*#__PURE__*/React.createElement(FormField, {
     field: field,

package/lib/esm/styles/index.scss.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from 'inject-head-style';
-var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap; }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
+var css_248z = ".hi-v4-form {max-width: 100%;position: relative; }.hi-v4-form fieldset {margin: 0;padding: 0;border: 0; }.hi-v4-form fieldset + fieldset {margin-top: 16px; }.hi-v4-form legend {margin: 0 0 16px;color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-form--placement-horizontal {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-column-gap: var(--hi-v4-spacing-10, 20px);-moz-column-gap: var(--hi-v4-spacing-10, 20px);column-gap: var(--hi-v4-spacing-10, 20px); }.hi-v4-form--placement-horizontal .hi-v4-form-label__indent {min-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label {display: -webkit-box;display: -ms-flexbox;display: flex;font-size: var(--hi-v4-text-size-md, 0.875rem);-webkit-box-sizing: border-box;box-sizing: border-box;margin-right: 0;margin-bottom: var(--hi-v4-spacing-12, 24px); }.hi-v4-form-label__text, .hi-v4-form-label__indent {-ms-flex-negative: 0;flex-shrink: 0;-webkit-box-sizing: border-box;box-sizing: border-box;vertical-align: top;color: var(--hi-v4-color-gray-800, #1f2937);overflow-wrap: break-word; }.hi-v4-form-label__text {padding-right: var(--hi-v4-spacing-6, 12px);min-height: var(--hi-v4-height-8, 32px);line-height: var(--hi-v4-height-8, 32px); }.hi-v4-form-label--placement-left .hi-v4-form-label__text {text-align: left; }.hi-v4-form-label--placement-right .hi-v4-form-label__text {text-align: right; }.hi-v4-form-label--placement-top .hi-v4-form-label__text {height: 22px;min-height: 22px;line-height: 22px;padding-right: 0;margin-bottom: var(--hi-v4-spacing-4, 8px); }.hi-v4-form-label--required .hi-v4-form-label__text::before {margin-right: var(--hi-v4-spacing-2, 4px);content: '*';color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-form-label--placement-top {text-align: left;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;margin-bottom: var(--hi-v4-spacing-12, 24px);padding-right: 0; }.hi-v4-form-label__content {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;position: relative;vertical-align: top;min-height: var(--hi-v4-height-8, 32px);-ms-flex-negative: 0;flex-shrink: 0; }.hi-v4-form-label__control {min-width: 1px; }.hi-v4-form-message {display: block;font-size: var(--hi-v4-text-size-md, 0.875rem);min-height: 24px;padding: 2px 0;-webkit-box-sizing: border-box;box-sizing: border-box;line-height: 20px;-webkit-transform: translateY(-10%);transform: translateY(-10%);opacity: 0;color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));-webkit-transition: all 0.3s;transition: all 0.3s; }.hi-v4-form-message--show {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0); }.hi-v4-form-item {position: relative; }.hi-v4-form-item__message {position: absolute; }";
 
 __styleInject__(css_248z);
 

package/lib/esm/use-form-field.js

@@ -14,17 +14,14 @@ import Validater from 'async-validator';
 import { normalizeArray } from '@hi-ui/array-utils';
 import { stringify, isValidField } from './utils/index.js';
 
-var useFormField = function useFormField(props) {
+var useFiledRules = function useFiledRules(props) {
   var field = props.field,
       rulesProp = props.rules,
       _props$valueType = props.valueType,
       valueType = _props$valueType === void 0 ? 'any' : _props$valueType;
 
   var _useFormContext = useFormContext(),
-      getFieldRules = _useFormContext.getFieldRules,
-      getFieldProps = _useFormContext.getFieldProps,
-      registerField = _useFormContext.registerField,
-      unregisterField = _useFormContext.unregisterField;
+      getFieldRules = _useFormContext.getFieldRules;
   /**
    * 处理校验规则，item 优先级大于 form
    */
@@ -38,7 +35,19 @@ var useFormField = function useFormField(props) {
         type: valueType
       }, rule);
     });
-  }, [rulesProp, field, getFieldRules, valueType]); // 当前 field 的唯一校验器
+  }, [rulesProp, field, getFieldRules, valueType]);
+  return fieldRules;
+};
+
+var useFormField = function useFormField(props) {
+  var field = props.field;
+
+  var _useFormContext2 = useFormContext(),
+      getFieldProps = _useFormContext2.getFieldProps,
+      registerField = _useFormContext2.registerField,
+      unregisterField = _useFormContext2.unregisterField;
+
+  var fieldRules = useFiledRules(props); // 当前 field 的唯一校验器
 
   var fieldValidate = useCallback(function (value) {
     var _Validater, _validater$validate;
@@ -68,4 +77,4 @@ var useFormField = function useFormField(props) {
   return getFieldProps(props);
 };
 
-export { useFormField };
+export { useFiledRules, useFormField };

package/lib/esm/use-form.js

@@ -21,6 +21,8 @@ var EMPTY_ERRORS = {};
 var EMPTY_TOUCHED = {};
 var DEFAULT_VALIDATE_TRIGGER = ['onChange', 'onBlur'];
 
+var EMPTY_FUNC = function EMPTY_FUNC() {};
+
 var useForm = function useForm(_a) {
   var initialValues = _a.initialValues,
       _a$initialErrors = _a.initialErrors,
@@ -154,11 +156,8 @@ var useForm = function useForm(_a) {
                   type: 'SET_VALIDATING',
                   payload: false
                 }); // @ts-ignore
-                // @ts-ignore
-
-                setFieldError(field, (_c = (_b = (_a = errorMsg.fields[stringify(field)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : ''); // TODO: 回调和promise支持
-                // TODO: 回调和promise支持
 
+                setFieldError(field, (_c = (_b = (_a = errorMsg.fields[stringify(field)]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : '');
                 throw errorMsg;
               }));
 
@@ -293,7 +292,7 @@ var useForm = function useForm(_a) {
     var shouldValidateField = validateAfterTouched ? getNested(formState.touched, field) && shouldValidate : shouldValidate;
 
     if (shouldValidateField) {
-      validateField(field, value);
+      validateField(field, value)["catch"](EMPTY_FUNC);
     }
   }, [validateField, validateAfterTouched, formState]);
   var setFieldsValue = useCallback(function (fieldsState) {
@@ -348,7 +347,7 @@ var useForm = function useForm(_a) {
   var handleFieldBlur = useCallback(function (fieldName, shouldValidate) {
     return function (evt) {
       if (shouldValidate) {
-        validateFieldState(fieldName);
+        validateFieldState(fieldName)["catch"](EMPTY_FUNC);
       }
 
       setFieldTouched(fieldName, true);
@@ -356,7 +355,7 @@ var useForm = function useForm(_a) {
   }, [setFieldTouched, validateFieldState]);
   var handleFieldTrigger = useCallback(function (fieldName) {
     return function (evt) {
-      validateFieldState(fieldName);
+      validateFieldState(fieldName)["catch"](EMPTY_FUNC);
     };
   }, [validateFieldState]);
   /**
@@ -455,7 +454,6 @@ var useForm = function useForm(_a) {
                     formDispatch({
                       type: 'SUBMIT_DONE'
                     }); // return combinedErrors
-                    // return combinedErrors
 
                     return formState.values;
                   }
@@ -465,8 +463,6 @@ var useForm = function useForm(_a) {
                       type: 'SUBMIT_DONE'
                     }); // return result
                     // TODO: 满足promise 如果既给到values 又给到 errors
-                    // return result
-                    // TODO: 满足promise 如果既给到values 又给到 errors
 
                     return formState.values;
                   })["catch"](function (_errors) {

package/lib/types/Form.d.ts

@@ -32,4 +32,8 @@ export interface FormProps<Values = Record<string, any>> extends Omit<HiBaseHTML
      * 配置是否展示冒号
      */
     showColon?: boolean;
+    /**
+     * FormItem 开启 filed 的 required 校验时，展示红色星号
+     */
+    showRequiredOnValidateRequired?: boolean;
 }

package/lib/types/FormSubmit.d.ts

@@ -8,5 +8,5 @@ export interface FormSubmitProps extends Omit<ButtonProps, 'onClick'> {
     /**
      * 点击提交后触发
      */
-    onClick?: () => void;
+    onClick?: (result: any, error: any) => void;
 }

package/lib/types/context.d.ts

@@ -5,6 +5,8 @@ export interface FormContextProps extends UseFormReturn {
     labelPlacement: 'left' | 'right' | 'top';
     contentPosition: 'top' | 'center' | 'bottom';
     showColon: boolean;
+    showRequiredOnValidateRequired: boolean;
+    prefixCls: string;
 }
 export declare const FormProvider: React.Provider<Omit<FormContextProps, "rootProps"> | null>;
 export declare const useFormContext: () => Omit<FormContextProps, "rootProps">;

package/lib/types/use-form-field.d.ts

@@ -1,4 +1,6 @@
 import { FormFieldPath, FormRuleModel, FormRuleType } from './types';
+import { Rules } from 'async-validator';
+export declare const useFiledRules: <Values = any>(props: UseFormFieldProps<Values>) => Rules[];
 export declare const useFormField: <Values = any>(props: UseFormFieldProps<Values>) => any;
 export interface UseFormFieldProps<T = any> {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/form",
-  "version": "4.0.0-beta.30",
+  "version": "4.0.0-beta.33",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HIUI <mi-hiui@xiaomi.com>",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@hi-ui/array-utils": "^4.0.0-beta.8",
-    "@hi-ui/button": "^4.0.0-beta.14",
+    "@hi-ui/button": "^4.0.0-beta.15",
     "@hi-ui/classname": "^4.0.0-beta.0",
     "@hi-ui/core-css": "^4.0.0-beta.5",
     "@hi-ui/dom-utils": "^4.0.0-beta.6",
@@ -65,5 +65,5 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "a2d7267f383300bb5b96f8c156f54da4924b79dc"
+  "gitHead": "c88fb2f2e288ed4eda0edaa405db38e55d55bcd6"
 }