refactor: form
tanjinzhou
parent
e79bfd8c96
commit
346ab47eb6
|
|
@ -6,7 +6,7 @@ import { ColProps } from '../grid/Col';
|
|||
import isRegExp from 'lodash/isRegExp';
|
||||
import warning from '../_util/warning';
|
||||
import FormItem from './FormItem';
|
||||
import { initDefaultProps, getListeners, getSlot } from '../_util/props-util';
|
||||
import { initDefaultProps, getSlot } from '../_util/props-util';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import { getParams } from './utils';
|
||||
|
||||
|
|
@ -22,6 +22,11 @@ export const FormProps = {
|
|||
rules: PropTypes.object,
|
||||
validateMessages: PropTypes.any,
|
||||
validateOnRuleChange: PropTypes.bool,
|
||||
// 提交失败自动滚动到第一个错误字段
|
||||
scrollToFirstError: PropTypes.bool,
|
||||
onFinish: PropTypes.func,
|
||||
onFinishFailed: PropTypes.func,
|
||||
name: PropTypes.name,
|
||||
};
|
||||
|
||||
export const ValidationRule = {
|
||||
|
|
@ -47,8 +52,6 @@ export const ValidationRule = {
|
|||
transform: PropTypes.func,
|
||||
/** custom validate function (Note: callback must be called) */
|
||||
validator: PropTypes.func,
|
||||
// 提交失败自动滚动到第一个错误字段
|
||||
scrollToFirstError: PropTypes.bool,
|
||||
};
|
||||
|
||||
const Form = {
|
||||
|
|
@ -93,12 +96,18 @@ const Form = {
|
|||
this.fields.splice(this.fields.indexOf(field), 1);
|
||||
}
|
||||
},
|
||||
onSubmit(e) {
|
||||
if (!getListeners(this).submit) {
|
||||
e.preventDefault();
|
||||
} else {
|
||||
this.$emit('submit', e);
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.$emit('submit', e);
|
||||
const res = this.validate();
|
||||
res
|
||||
.then(values => {
|
||||
this.$emit('finish', values);
|
||||
})
|
||||
.catch(errors => {
|
||||
this.handleFinishFailed(errors);
|
||||
});
|
||||
},
|
||||
resetFields(props = []) {
|
||||
if (!this.model) {
|
||||
|
|
@ -124,8 +133,16 @@ const Form = {
|
|||
field.clearValidate();
|
||||
});
|
||||
},
|
||||
handleFinishFailed(errorInfo) {
|
||||
const { scrollToFirstError } = this;
|
||||
this.$emit('finishFailed', errorInfo);
|
||||
if (scrollToFirstError && errorInfo.errorFields.length) {
|
||||
this.scrollToField(errorInfo.errorFields[0].name);
|
||||
}
|
||||
},
|
||||
validate() {
|
||||
return this.validateField(...arguments);
|
||||
|
||||
// if (!this.model) {
|
||||
// warning(false, 'FormModel', 'model is required for resetFields to work.');
|
||||
// return;
|
||||
|
|
@ -179,11 +196,11 @@ const Form = {
|
|||
let { callback } = params;
|
||||
if (!callback || typeof callback === 'function') {
|
||||
const oldCb = callback;
|
||||
callback = (errors, values) => {
|
||||
callback = (errorFields, values) => {
|
||||
if (oldCb) {
|
||||
oldCb(errors, values);
|
||||
} else if (errors) {
|
||||
reject({ errors, values });
|
||||
oldCb(errorFields, values);
|
||||
} else if (errorFields) {
|
||||
reject({ errorFields, values });
|
||||
} else {
|
||||
resolve(values);
|
||||
}
|
||||
|
|
@ -208,8 +225,9 @@ const Form = {
|
|||
let fieldsErrors = {};
|
||||
let valid = true;
|
||||
let count = 0;
|
||||
const promiseList = [];
|
||||
fields.forEach(field => {
|
||||
field.validate('', errors => {
|
||||
const promise = field.validate('', errors => {
|
||||
if (errors) {
|
||||
valid = false;
|
||||
fieldsErrors[field.prop] = errors;
|
||||
|
|
@ -219,6 +237,7 @@ const Form = {
|
|||
callback(valid ? null : fieldsErrors, this.getFieldsValue(fields));
|
||||
}
|
||||
});
|
||||
promiseList.push(promise.then(() => {}));
|
||||
});
|
||||
});
|
||||
pending.catch(e => {
|
||||
|
|
@ -228,20 +247,11 @@ const Form = {
|
|||
return e;
|
||||
});
|
||||
return pending;
|
||||
// names = [].concat(names);
|
||||
// const fields = this.fields.filter(field => names.indexOf(field.prop) !== -1);
|
||||
// if (!fields.length) {
|
||||
// warning(false, 'FormModel', 'please pass correct props!');
|
||||
// return;
|
||||
// }
|
||||
// fields.forEach(field => {
|
||||
// field.validate('', cb);
|
||||
// });
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
const { prefixCls: customizePrefixCls, hideRequiredMark, layout, onSubmit } = this;
|
||||
const { prefixCls: customizePrefixCls, hideRequiredMark, layout, handleSubmit } = this;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||
const { class: className, onSubmit: originSubmit, ...restProps } = this.$attrs;
|
||||
|
|
@ -253,7 +263,7 @@ const Form = {
|
|||
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
|
||||
});
|
||||
return (
|
||||
<form onSubmit={onSubmit} class={formClassName} {...restProps}>
|
||||
<form onSubmit={handleSubmit} class={formClassName} {...restProps}>
|
||||
{getSlot(this)}
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
import { inject } from 'vue';
|
||||
import { inject, provide, Transition } from 'vue';
|
||||
import AsyncValidator from 'async-validator';
|
||||
import cloneDeep from 'lodash/cloneDeep';
|
||||
import PropTypes from '../_util/vue-types';
|
||||
import { ColProps } from '../grid/Col';
|
||||
import classNames from 'classnames';
|
||||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
import Row from '../grid/Row';
|
||||
import Col, { ColProps } from '../grid/Col';
|
||||
import {
|
||||
initDefaultProps,
|
||||
findDOMNode,
|
||||
getComponent,
|
||||
getOptionProps,
|
||||
getEvents,
|
||||
|
|
@ -13,10 +17,20 @@ import {
|
|||
} from '../_util/props-util';
|
||||
import BaseMixin from '../_util/BaseMixin';
|
||||
import { ConfigConsumerProps } from '../config-provider';
|
||||
import FormItem from '../form/FormItem';
|
||||
import { cloneElement } from '../_util/vnode';
|
||||
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
|
||||
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
|
||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
||||
import { finishOnAllFailed, finishOnFirstFailed, getNamePath } from './utils';
|
||||
import { warning } from '../vc-util/warning';
|
||||
|
||||
function noop() {}
|
||||
const iconMap = {
|
||||
success: CheckCircleFilled,
|
||||
warning: ExclamationCircleFilled,
|
||||
error: CloseCircleFilled,
|
||||
validating: LoadingOutlined,
|
||||
};
|
||||
|
||||
function getPropByPath(obj, path, strict) {
|
||||
let tempObj = obj;
|
||||
|
|
@ -74,6 +88,7 @@ export default {
|
|||
}),
|
||||
setup() {
|
||||
return {
|
||||
isFormItemChildren: inject('isFormItemChildren', false),
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
FormContext: inject('FormContext', {}),
|
||||
};
|
||||
|
|
@ -84,10 +99,16 @@ export default {
|
|||
validateMessage: '',
|
||||
validateDisabled: false,
|
||||
validator: {},
|
||||
helpShow: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
fieldId() {
|
||||
return this.id || (this.FormContext.name && this.prop)
|
||||
? `${this.FormContext.name}_${this.prop}`
|
||||
: undefined;
|
||||
},
|
||||
fieldValue() {
|
||||
const model = this.FormContext.model;
|
||||
if (!model || !this.prop) {
|
||||
|
|
@ -111,7 +132,7 @@ export default {
|
|||
return true;
|
||||
});
|
||||
}
|
||||
return isRequired;
|
||||
return isRequired || this.required;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -119,6 +140,9 @@ export default {
|
|||
this.validateState = val;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
provide('isFormItemChildren', true);
|
||||
},
|
||||
mounted() {
|
||||
if (this.prop) {
|
||||
const { addField } = this.FormContext;
|
||||
|
|
@ -131,35 +155,188 @@ export default {
|
|||
removeField && removeField(this);
|
||||
},
|
||||
methods: {
|
||||
validate(trigger, callback = noop) {
|
||||
async validateRule(name, value, rule) {
|
||||
const cloneRule = { ...rule };
|
||||
// We should special handle array validate
|
||||
let subRuleField = null;
|
||||
if (cloneRule && cloneRule.type === 'array' && cloneRule.defaultField) {
|
||||
subRuleField = cloneRule.defaultField;
|
||||
delete cloneRule.defaultField;
|
||||
}
|
||||
let result = [];
|
||||
const validator = new AsyncValidator({
|
||||
[name]: [cloneRule],
|
||||
});
|
||||
if (this.FormContext && this.FormContext.validateMessages) {
|
||||
validator.messages(this.FormContext.validateMessages);
|
||||
}
|
||||
try {
|
||||
await validator.validate(
|
||||
{ [this.prop]: this.fieldValue },
|
||||
{ firstFields: !!this.validateFirst },
|
||||
);
|
||||
} catch (errObj) {
|
||||
if (errObj.errors) {
|
||||
result = errObj.errors.map(({ message }) => message);
|
||||
} else {
|
||||
console.error(errObj);
|
||||
}
|
||||
}
|
||||
if (!result.length && subRuleField) {
|
||||
const subResults = await Promise.all(
|
||||
value.map((subValue, i) => this.validateRule(`${name}.${i}`, subValue, subRuleField)),
|
||||
);
|
||||
|
||||
return subResults.reduce((prev, errors) => [...prev, ...errors], []);
|
||||
}
|
||||
return result;
|
||||
},
|
||||
validateRules(namePath, value, rules, validateFirst) {
|
||||
const name = namePath.join('.');
|
||||
|
||||
// Fill rule with context
|
||||
const filledRules = rules.map(currentRule => {
|
||||
const originValidatorFunc = currentRule.validator;
|
||||
|
||||
if (!originValidatorFunc) {
|
||||
return currentRule;
|
||||
}
|
||||
return {
|
||||
...currentRule,
|
||||
validator(rule, val, callback) {
|
||||
let hasPromise = false;
|
||||
|
||||
// Wrap callback only accept when promise not provided
|
||||
const wrappedCallback = (...args) => {
|
||||
// Wait a tick to make sure return type is a promise
|
||||
Promise.resolve().then(() => {
|
||||
warning(
|
||||
!hasPromise,
|
||||
'Your validator function has already return a promise. `callback` will be ignored.',
|
||||
);
|
||||
|
||||
if (!hasPromise) {
|
||||
callback(...args);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Get promise
|
||||
const promise = originValidatorFunc(rule, val, wrappedCallback);
|
||||
hasPromise =
|
||||
promise && typeof promise.then === 'function' && typeof promise.catch === 'function';
|
||||
|
||||
/**
|
||||
* 1. Use promise as the first priority.
|
||||
* 2. If promise not exist, use callback with warning instead
|
||||
*/
|
||||
warning(hasPromise, '`callback` is deprecated. Please return a promise instead.');
|
||||
|
||||
if (hasPromise) {
|
||||
promise
|
||||
.then(() => {
|
||||
callback();
|
||||
})
|
||||
.catch(err => {
|
||||
callback(err);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
let summaryPromise;
|
||||
|
||||
if (validateFirst === true) {
|
||||
// >>>>> Validate by serialization
|
||||
summaryPromise = new Promise(async resolve => {
|
||||
/* eslint-disable no-await-in-loop */
|
||||
for (let i = 0; i < filledRules.length; i += 1) {
|
||||
const errors = await this.validateRule(name, value, filledRules[i]);
|
||||
if (errors.length) {
|
||||
resolve(errors);
|
||||
return;
|
||||
}
|
||||
}
|
||||
/* eslint-enable */
|
||||
|
||||
resolve([]);
|
||||
});
|
||||
} else {
|
||||
// >>>>> Validate by parallel
|
||||
const rulePromises = filledRules.map(rule => this.validateRule(name, value, rule));
|
||||
|
||||
summaryPromise = (validateFirst
|
||||
? finishOnFirstFailed(rulePromises)
|
||||
: finishOnAllFailed(rulePromises)
|
||||
).then(errors => {
|
||||
if (!errors.length) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return Promise.reject(errors);
|
||||
});
|
||||
}
|
||||
|
||||
// Internal catch error to avoid console error log.
|
||||
summaryPromise.catch(e => e);
|
||||
|
||||
return summaryPromise;
|
||||
},
|
||||
validate(trigger) {
|
||||
this.validateDisabled = false;
|
||||
const rules = this.getFilteredRule(trigger);
|
||||
if (!rules || rules.length === 0) {
|
||||
callback();
|
||||
return true;
|
||||
return;
|
||||
}
|
||||
this.validateState = 'validating';
|
||||
const descriptor = {};
|
||||
if (rules && rules.length > 0) {
|
||||
rules.forEach(rule => {
|
||||
delete rule.trigger;
|
||||
});
|
||||
}
|
||||
descriptor[this.prop] = rules;
|
||||
const validator = new AsyncValidator(descriptor);
|
||||
if (this.FormContext && this.FormContext.validateMessages) {
|
||||
validator.messages(this.FormContext.validateMessages);
|
||||
}
|
||||
const model = {};
|
||||
model[this.prop] = this.fieldValue;
|
||||
validator.validate(model, {}, errors => {
|
||||
this.validateState = errors ? 'error' : 'success';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
callback(errors);
|
||||
this.FormContext &&
|
||||
this.FormContext.$emit &&
|
||||
this.FormContext.$emit('validate', this.prop, !errors, this.validateMessage || null);
|
||||
});
|
||||
// descriptor[this.prop] = rules;
|
||||
// const validator = new AsyncValidator(descriptor);
|
||||
// if (this.FormContext && this.FormContext.validateMessages) {
|
||||
// validator.messages(this.FormContext.validateMessages);
|
||||
// }
|
||||
const fieldNamePath = getNamePath(this.prop);
|
||||
// const promiseList = [];
|
||||
const promise = this.validateRules(fieldNamePath, this.fieldValue, rules, this.validateFirst);
|
||||
promise
|
||||
.then(res => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(res);
|
||||
this.validateState = 'success';
|
||||
this.validateMessage = '';
|
||||
return { name: fieldNamePath, errors: [] };
|
||||
})
|
||||
.catch(errors => {
|
||||
this.validateState = 'error';
|
||||
this.validateMessage = errors;
|
||||
Promise.reject({
|
||||
name: fieldNamePath,
|
||||
errors,
|
||||
});
|
||||
});
|
||||
return promise;
|
||||
// // Wrap promise with field
|
||||
// promiseList.push(
|
||||
// promise
|
||||
// .then(() => ({ name: fieldNamePath, errors: [] }))
|
||||
// .catch(errors =>
|
||||
// Promise.reject({
|
||||
// name: fieldNamePath,
|
||||
// errors,
|
||||
// }),
|
||||
// ),
|
||||
// );
|
||||
// this.validateState = result.length ? 'error' : 'success';
|
||||
// this.validateMessage = result.length ? result[0] : '';
|
||||
// this.FormContext &&
|
||||
// this.FormContext.$emit &&
|
||||
// this.FormContext.$emit('validate', this.prop, !result.length, this.validateMessage || null);
|
||||
// return result;
|
||||
},
|
||||
getRules() {
|
||||
let formRules = this.FormContext.rules;
|
||||
|
|
@ -219,21 +396,200 @@ export default {
|
|||
this.validateDisabled = false;
|
||||
});
|
||||
},
|
||||
getHelpMessage() {
|
||||
const help = getComponent(this, 'help');
|
||||
|
||||
return this.validateMessage || help;
|
||||
},
|
||||
|
||||
onLabelClick() {
|
||||
const id = this.fieldId;
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
const formItemNode = findDOMNode(this);
|
||||
const control = formItemNode.querySelector(`[id="${id}"]`);
|
||||
if (control && control.focus) {
|
||||
control.focus();
|
||||
}
|
||||
},
|
||||
|
||||
onHelpAnimEnd(_key, helpShow) {
|
||||
this.helpShow = helpShow;
|
||||
if (!helpShow) {
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
|
||||
renderHelp(prefixCls) {
|
||||
const help = this.getHelpMessage();
|
||||
const children = help ? (
|
||||
<div class={`${prefixCls}-explain`} key="help">
|
||||
{help}
|
||||
</div>
|
||||
) : null;
|
||||
if (children) {
|
||||
this.helpShow = !!children;
|
||||
}
|
||||
const transitionProps = getTransitionProps('show-help', {
|
||||
onAfterEnter: () => this.onHelpAnimEnd('help', true),
|
||||
onAfterLeave: () => this.onHelpAnimEnd('help', false),
|
||||
});
|
||||
return (
|
||||
<Transition {...transitionProps} key="help">
|
||||
{children}
|
||||
</Transition>
|
||||
);
|
||||
},
|
||||
|
||||
renderExtra(prefixCls) {
|
||||
const extra = getComponent(this, 'extra');
|
||||
return extra ? <div class={`${prefixCls}-extra`}>{extra}</div> : null;
|
||||
},
|
||||
|
||||
renderValidateWrapper(prefixCls, c1, c2, c3) {
|
||||
const validateStatus = this.validateState;
|
||||
|
||||
let classes = `${prefixCls}-item-control`;
|
||||
if (validateStatus) {
|
||||
classes = classNames(`${prefixCls}-item-control`, {
|
||||
'has-feedback': this.hasFeedback || validateStatus === 'validating',
|
||||
'has-success': validateStatus === 'success',
|
||||
'has-warning': validateStatus === 'warning',
|
||||
'has-error': validateStatus === 'error',
|
||||
'is-validating': validateStatus === 'validating',
|
||||
});
|
||||
}
|
||||
const IconNode = validateStatus && iconMap[validateStatus];
|
||||
|
||||
const icon =
|
||||
this.hasFeedback && IconNode ? (
|
||||
<span class={`${prefixCls}-item-children-icon`}>
|
||||
<IconNode />
|
||||
</span>
|
||||
) : null;
|
||||
return (
|
||||
<div class={classes}>
|
||||
<span class={`${prefixCls}-item-children`}>
|
||||
{c1}
|
||||
{icon}
|
||||
</span>
|
||||
{c2}
|
||||
{c3}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
renderWrapper(prefixCls, children) {
|
||||
const { wrapperCol: contextWrapperCol } = this.isFormItemChildren ? {} : this.FormContext;
|
||||
const { wrapperCol } = this;
|
||||
const mergedWrapperCol = wrapperCol || contextWrapperCol || {};
|
||||
const { style, id, ...restProps } = mergedWrapperCol;
|
||||
const className = classNames(`${prefixCls}-item-control-wrapper`, mergedWrapperCol.class);
|
||||
const colProps = {
|
||||
...restProps,
|
||||
class: className,
|
||||
key: 'wrapper',
|
||||
style,
|
||||
id,
|
||||
};
|
||||
return <Col {...colProps}>{children}</Col>;
|
||||
},
|
||||
|
||||
renderLabel(prefixCls) {
|
||||
const {
|
||||
vertical,
|
||||
labelAlign: contextLabelAlign,
|
||||
labelCol: contextLabelCol,
|
||||
colon: contextColon,
|
||||
} = this.FormContext;
|
||||
const { labelAlign, labelCol, colon, fieldId, htmlFor } = this;
|
||||
const label = getComponent(this, 'label');
|
||||
const required = this.isRequired;
|
||||
const mergedLabelCol = labelCol || contextLabelCol || {};
|
||||
|
||||
const mergedLabelAlign = labelAlign || contextLabelAlign;
|
||||
const labelClsBasic = `${prefixCls}-item-label`;
|
||||
const labelColClassName = classNames(
|
||||
labelClsBasic,
|
||||
mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
|
||||
mergedLabelCol.class,
|
||||
);
|
||||
const {
|
||||
class: labelColClass,
|
||||
style: labelColStyle,
|
||||
id: labelColId,
|
||||
...restProps
|
||||
} = mergedLabelCol;
|
||||
let labelChildren = label;
|
||||
// Keep label is original where there should have no colon
|
||||
const computedColon = colon === true || (contextColon !== false && colon !== false);
|
||||
const haveColon = computedColon && !vertical;
|
||||
// Remove duplicated user input colon
|
||||
if (haveColon && typeof label === 'string' && label.trim() !== '') {
|
||||
labelChildren = label.replace(/[：:]\s*$/, '');
|
||||
}
|
||||
|
||||
const labelClassName = classNames({
|
||||
[`${prefixCls}-item-required`]: required,
|
||||
[`${prefixCls}-item-no-colon`]: !computedColon,
|
||||
});
|
||||
const colProps = {
|
||||
...restProps,
|
||||
class: labelColClassName,
|
||||
key: 'label',
|
||||
style: labelColStyle,
|
||||
id: labelColId,
|
||||
};
|
||||
|
||||
return label ? (
|
||||
<Col {...colProps}>
|
||||
<label
|
||||
for={htmlFor || fieldId}
|
||||
class={labelClassName}
|
||||
title={typeof label === 'string' ? label : ''}
|
||||
onClick={this.onLabelClick}
|
||||
>
|
||||
{labelChildren}
|
||||
</label>
|
||||
</Col>
|
||||
) : null;
|
||||
},
|
||||
renderChildren(prefixCls, child) {
|
||||
return [
|
||||
this.renderLabel(prefixCls),
|
||||
this.renderWrapper(
|
||||
prefixCls,
|
||||
this.renderValidateWrapper(
|
||||
prefixCls,
|
||||
child,
|
||||
this.renderHelp(prefixCls),
|
||||
this.renderExtra(prefixCls),
|
||||
),
|
||||
),
|
||||
];
|
||||
},
|
||||
renderFormItem(child) {
|
||||
const { prefixCls: customizePrefixCls } = this.$props;
|
||||
const { class: className, ...restProps } = this.$attrs;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||
const children = this.renderChildren(prefixCls, child);
|
||||
const itemClassName = {
|
||||
[className]: className,
|
||||
[`${prefixCls}-item`]: true,
|
||||
[`${prefixCls}-item-with-help`]: this.helpShow,
|
||||
};
|
||||
|
||||
return (
|
||||
<Row class={classNames(itemClassName)} key="row" {...restProps}>
|
||||
{children}
|
||||
</Row>
|
||||
);
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const { autoLink, ...props } = getOptionProps(this);
|
||||
const label = getComponent(this, 'label');
|
||||
const extra = getComponent(this, 'extra');
|
||||
const help = getComponent(this, 'help');
|
||||
const formProps = {
|
||||
...this.$attrs,
|
||||
...props,
|
||||
label,
|
||||
extra,
|
||||
validateStatus: this.validateState,
|
||||
help: this.validateMessage || help,
|
||||
required: this.isRequired || props.required,
|
||||
};
|
||||
const { autoLink } = getOptionProps(this);
|
||||
const children = getSlot(this);
|
||||
let firstChildren = children[0];
|
||||
if (this.prop && autoLink && isValidElement(firstChildren)) {
|
||||
|
|
@ -241,6 +597,7 @@ export default {
|
|||
const originalBlur = originalEvents.onBlur;
|
||||
const originalChange = originalEvents.onChange;
|
||||
firstChildren = cloneElement(firstChildren, {
|
||||
...(this.fieldId ? { id: this.fieldId } : undefined),
|
||||
onBlur: (...args) => {
|
||||
originalBlur && originalBlur(...args);
|
||||
this.onFieldBlur();
|
||||
|
|
@ -257,11 +614,6 @@ export default {
|
|||
},
|
||||
});
|
||||
}
|
||||
return (
|
||||
<FormItem {...formProps}>
|
||||
{firstChildren}
|
||||
{children.slice(1)}
|
||||
</FormItem>
|
||||
);
|
||||
return this.renderFormItem([firstChildren, children.slice(1)]);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
const typeTemplate = "'${name}' is not a valid ${type}";
|
||||
|
||||
export const defaultValidateMessages = {
|
||||
default: "Validation error on field '${name}'",
|
||||
required: "'${name}' is required",
|
||||
enum: "'${name}' must be one of [${enum}]",
|
||||
whitespace: "'${name}' cannot be empty",
|
||||
date: {
|
||||
format: "'${name}' is invalid for format date",
|
||||
parse: "'${name}' could not be parsed as date",
|
||||
invalid: "'${name}' is invalid date",
|
||||
},
|
||||
types: {
|
||||
string: typeTemplate,
|
||||
method: typeTemplate,
|
||||
array: typeTemplate,
|
||||
object: typeTemplate,
|
||||
number: typeTemplate,
|
||||
date: typeTemplate,
|
||||
boolean: typeTemplate,
|
||||
integer: typeTemplate,
|
||||
float: typeTemplate,
|
||||
regexp: typeTemplate,
|
||||
email: typeTemplate,
|
||||
url: typeTemplate,
|
||||
hex: typeTemplate,
|
||||
},
|
||||
string: {
|
||||
len: "'${name}' must be exactly ${len} characters",
|
||||
min: "'${name}' must be at least ${min} characters",
|
||||
max: "'${name}' cannot be longer than ${max} characters",
|
||||
range: "'${name}' must be between ${min} and ${max} characters",
|
||||
},
|
||||
number: {
|
||||
len: "'${name}' must equal ${len}",
|
||||
min: "'${name}' cannot be less than ${min}",
|
||||
max: "'${name}' cannot be greater than ${max}",
|
||||
range: "'${name}' must be between ${min} and ${max}",
|
||||
},
|
||||
array: {
|
||||
len: "'${name}' must be exactly ${len} in length",
|
||||
min: "'${name}' cannot be less than ${min} in length",
|
||||
max: "'${name}' cannot be greater than ${max} in length",
|
||||
range: "'${name}' must be between ${min} and ${max} in length",
|
||||
},
|
||||
pattern: {
|
||||
mismatch: "'${name}' does not match pattern ${pattern}",
|
||||
},
|
||||
};
|
||||
|
|
@ -102,3 +102,42 @@ export function getScrollableContainer(n) {
|
|||
}
|
||||
return nodeName === 'body' ? node.ownerDocument : node;
|
||||
}
|
||||
|
||||
export async function finishOnAllFailed(rulePromises) {
|
||||
return Promise.all(rulePromises).then(errorsList => {
|
||||
const errors = [].concat(...errorsList);
|
||||
|
||||
return errors;
|
||||
});
|
||||
}
|
||||
|
||||
export async function finishOnFirstFailed(rulePromises) {
|
||||
let count = 0;
|
||||
|
||||
return new Promise(resolve => {
|
||||
rulePromises.forEach(promise => {
|
||||
promise.then(errors => {
|
||||
if (errors.length) {
|
||||
resolve(errors);
|
||||
}
|
||||
|
||||
count += 1;
|
||||
if (count === rulePromises.length) {
|
||||
resolve([]);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
export function toArray(value) {
|
||||
if (value === undefined || value === null) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return Array.isArray(value) ? value : [value];
|
||||
}
|
||||
|
||||
export function getNamePath(path) {
|
||||
return toArray(path);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue