github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: form validateFirst not reject #4273

Browse Source
pull/4283/head
tangjinzhou 3 years ago
parent 4a0fce5a0a
commit 5f8d8a555b
5 changed files with 157 additions and 136 deletions
Show Stats Download Patch File Download Diff File

38
components/form/Form.tsx
Unescape View File

@ -16,7 +16,13 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
import type { VueNode } from '../_util/type';
import { tuple } from '../_util/type';
import type { ColProps } from '../grid/Col';
import type { InternalNamePath, NamePath, ValidateErrorEntity, ValidateOptions } from './interface';
import type {
InternalNamePath,
NamePath,
RuleError,
ValidateErrorEntity,
ValidateOptions,
} from './interface';
import { useInjectSize } from '../_util/hooks/useSize';
import useConfigInject from '../_util/hooks/useConfigInject';
import { useProvideForm } from './context';
@ -247,13 +253,33 @@ const Form = defineComponent({
// Wrap promise with field
promiseList.push(
promise
.then(() => ({ name: fieldNamePath, errors: [] }))
.catch((errors: any) =>
Promise.reject({
.then<any, RuleError>(() => ({ name: fieldNamePath, errors: [], warnings: [] }))
.catch((ruleErrors: RuleError[]) => {
const mergedErrors: string[] = [];
const mergedWarnings: string[] = [];
ruleErrors.forEach(({ rule: { warningOnly }, errors }) => {
if (warningOnly) {
mergedWarnings.push(...errors);
} else {
mergedErrors.push(...errors);
}
});
if (mergedErrors.length) {
return Promise.reject({
name: fieldNamePath,
errors,
errors: mergedErrors,
warnings: mergedWarnings,
});
}
return {
name: fieldNamePath,
errors: mergedErrors,
warnings: mergedWarnings,
};
}),
),
);
}
});

12
components/form/FormItem.tsx
Unescape View File

@ -13,7 +13,7 @@ import { toArray } from './utils/typeUtil';
import { warning } from '../vc-util/warning';
import find from 'lodash-es/find';
import { tuple } from '../_util/type';
import type { InternalNamePath, RuleObject, ValidateOptions } from './interface';
import type { InternalNamePath, RuleError, RuleObject, ValidateOptions } from './interface';
import useConfigInject from '../_util/hooks/useConfigInject';
import { useInjectForm } from './context';
import FormItemLabel from './FormItemLabel';
@ -31,7 +31,7 @@ export interface FieldExpose {
clearValidate: () => void;
namePath: ComputedRef<InternalNamePath>;
rules?: ComputedRef<ValidationRule[]>;
validateRules: (options: ValidateOptions) => Promise<void> | Promise<string[]>;
validateRules: (options: ValidateOptions) => Promise<void> | Promise<RuleError[]>;
}
function getPropByPath(obj: any, namePathList: any, strict?: boolean) {
@ -209,10 +209,12 @@ export default defineComponent({
promise
.catch(e => e)
.then((ers = []) => {
.then((results: RuleError[] = []) => {
if (validateState.value === 'validating') {
validateState.value = ers.length ? 'error' : 'success';
errors.value = ers;
const res = results.filter(result => result && result.errors.length);
validateState.value = res.length ? 'error' : 'success';
errors.value = res.map(r => r.errors);
}
});

7
components/form/interface.ts
Unescape View File

@ -50,11 +50,13 @@ type Validator = (
) => Promise<void> | void;
export interface ValidatorRule {
warningOnly?: boolean;
message?: string | VueNode;
validator: Validator;
}
interface BaseRule {
warningOnly?: boolean;
enum?: StoreValue[];
len?: number;
max?: number;
@ -92,6 +94,11 @@ export interface FieldError {
errors: string[];
}
export interface RuleError {
errors: string[];
rule: RuleObject;
}
export interface ValidateOptions {
triggerName?: string;
validateMessages?: ValidateMessages;

3
components/form/utils/asyncUtil.ts
Unescape View File

@ -1,8 +1,9 @@
import type { FieldError } from '../interface';
export function allPromiseFinish(promiseList: Promise<FieldError>[]): Promise<FieldError[]> {
let hasError = false;
let count = promiseList.length;
const results = [];
const results: FieldError[] = [];
if (!promiseList.length) {
return Promise.resolve([]);

153
components/form/utils/validateUtil.ts
Unescape View File

@ -5,7 +5,7 @@ import { warning } from '../../vc-util/warning';
import { setValues } from './valueUtil';
import { defaultValidateMessages } from './messages';
import { isValidElement } from '../../_util/props-util';
import type { InternalNamePath, RuleObject, ValidateMessages, ValidateOptions } from '../interface';
import type { InternalNamePath, RuleError, RuleObject, ValidateOptions } from '../interface';
// Remove incorrect original ts define
const AsyncValidator: any = RawAsyncValidator;
@ -15,52 +15,12 @@ const AsyncValidator: any = RawAsyncValidator;
* `I'm ${name}` + { name: 'bamboo' } = I'm bamboo
*/
function replaceMessage(template: string, kv: Record<string, string>): string {
return template.replace(/\$\{\w+\}/g, str => {
return template.replace(/\$\{\w+\}/g, (str: string) => {
const key = str.slice(2, -1);
return kv[key];
});
}
/**
* We use `async-validator` to validate rules. So have to hot replace the message with validator.
* { required: '${name} is required' } => { required: () => 'field is required' }
*/
function convertMessages(
messages: ValidateMessages,
name: string,
rule: RuleObject,
messageVariables?: Record<string, string>,
): ValidateMessages {
const kv = {
...(rule as Record<string, string | number>),
name,
enum: (rule.enum || []).join(', '),
};
const replaceFunc = (template: string, additionalKV?: Record<string, string>) => () =>
replaceMessage(template, { ...kv, ...additionalKV });
/* eslint-disable no-param-reassign */
function fillTemplate(source: ValidateMessages, target: ValidateMessages = {}) {
Object.keys(source).forEach(ruleName => {
const value = source[ruleName];
if (typeof value === 'string') {
target[ruleName] = replaceFunc(value, messageVariables);
} else if (value && typeof value === 'object') {
target[ruleName] = {};
fillTemplate(value, target[ruleName]);
} else {
target[ruleName] = value;
}
});
return target;
}
/* eslint-enable */
return fillTemplate(setValues({}, defaultValidateMessages, messages)) as ValidateMessages;
}
async function validateRule(
name: string,
value: any,
@ -69,29 +29,22 @@ async function validateRule(
messageVariables?: Record<string, string>,
): Promise<string[]> {
const cloneRule = { ...rule };
// Bug of `async-validator`
delete (cloneRule as any).ruleIndex;
// We should special handle array validate
let subRuleField: RuleObject = null;
if (cloneRule && cloneRule.type === 'array' && cloneRule.defaultField) {
subRuleField = cloneRule.defaultField;
delete cloneRule.defaultField;
}
if (
!rule.type &&
typeof rule.validator !== 'function' &&
typeof value !== 'string' &&
typeof value !== 'undefined'
) {
warning(
false,
`Form rules must provide type property when validating the form item named [${name}] which is not string type`,
);
}
const validator = new AsyncValidator({
[name]: [cloneRule],
});
const messages = convertMessages(options.validateMessages, name, cloneRule, messageVariables);
const messages = setValues({}, defaultValidateMessages, options.validateMessages);
validator.messages(messages);
let result = [];
@ -120,7 +73,22 @@ async function validateRule(
return subResults.reduce((prev, errors) => [...prev, ...errors], []);
}
return result;
// Replace message with variables
const kv = {
...(rule as Record<string, string | number>),
name,
enum: (rule.enum || []).join(', '),
...messageVariables,
};
const fillVariableResult = result.map(error => {
if (typeof error === 'string') {
return replaceMessage(error, kv);
}
return error;
});
return fillVariableResult;
}
/**
@ -138,15 +106,17 @@ export function validateRules(
const name = namePath.join('.');
// Fill rule with context
const filledRules: RuleObject[] = rules.map(currentRule => {
const filledRules: RuleObject[] = rules
.map((currentRule, ruleIndex) => {
const originValidatorFunc = currentRule.validator;
if (!originValidatorFunc) {
return currentRule;
}
return {
const cloneRule = {
...currentRule,
validator(rule: RuleObject, val: any, callback: (error?: string) => void) {
ruleIndex,
};
// Replace validator if needed
if (originValidatorFunc) {
cloneRule.validator = (rule: RuleObject, val: any, callback: (error?: string) => void) => {
let hasPromise = false;
// Wrap callback only accept when promise not provided
@ -181,23 +151,39 @@ export function validateRules(
callback();
})
.catch(err => {
callback(err);
callback(err || ' ');
});
}
},
};
}
return cloneRule;
})
.sort(({ warningOnly: w1, ruleIndex: i1 }, { warningOnly: w2, ruleIndex: i2 }) => {
if (!!w1 === !!w2) {
// Let keep origin order
return i1 - i2;
}
if (w1) {
return 1;
}
return -1;
});
let summaryPromise: Promise<string[]>;
// Do validate rules
let summaryPromise: Promise<RuleError[]>;
if (validateFirst === true) {
// >>>>> Validate by serialization
summaryPromise = new Promise(async resolve => {
summaryPromise = new Promise(async (resolve, reject) => {
/* eslint-disable no-await-in-loop */
for (let i = 0; i < filledRules.length; i += 1) {
const errors = await validateRule(name, value, filledRules[i], options, messageVariables);
const rule = filledRules[i];
const errors = await validateRule(name, value, rule, options, messageVariables);
if (errors.length) {
resolve(errors);
reject([{ errors, rule }]);
return;
}
}
@ -207,18 +193,15 @@ export function validateRules(
});
} else {
// >>>>> Validate by parallel
const rulePromises = filledRules.map(rule =>
validateRule(name, value, rule, options, messageVariables),
const rulePromises: Promise<RuleError>[] = filledRules.map(rule =>
validateRule(name, value, rule, options, messageVariables).then(errors => ({ errors, rule })),
);
summaryPromise = (
validateFirst ? finishOnFirstFailed(rulePromises) : finishOnAllFailed(rulePromises)
).then((errors: string[]): string[] | Promise<string[]> => {
if (!errors.length) {
return [];
}
return Promise.reject<string[]>(errors);
).then((errors: RuleError[]): RuleError[] | Promise<RuleError[]> => {
// Always change to rejection for Field to catch
return Promise.reject<RuleError[]>(errors);
});
}
@ -228,22 +211,24 @@ export function validateRules(
return summaryPromise;
}
async function finishOnAllFailed(rulePromises: Promise<string[]>[]): Promise<string[]> {
return Promise.all(rulePromises).then(errorsList => {
const errors = [].concat(...errorsList);
async function finishOnAllFailed(rulePromises: Promise<RuleError>[]): Promise<RuleError[]> {
return Promise.all(rulePromises).then(
(errorsList: RuleError[]): RuleError[] | Promise<RuleError[]> => {
const errors: RuleError[] = [].concat(...errorsList);
return errors;
});
},
);
}
async function finishOnFirstFailed(rulePromises: Promise<string[]>[]): Promise<string[]> {
async function finishOnFirstFailed(rulePromises: Promise<RuleError>[]): Promise<RuleError[]> {
let count = 0;
return new Promise(resolve => {
rulePromises.forEach(promise => {
promise.then(errors => {
if (errors.length) {
resolve(errors);
promise.then(ruleError => {
if (ruleError.errors.length) {
resolve([ruleError]);
}
count += 1;

Write Preview
Loading…
Cancel
Save