blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Form): add getValidationStatus method (#10620)

Browse Source
This commit is contained in:
neverland 2022-05-22 15:07:19 +08:00 committed by GitHub
parent df024f1c6e
commit 3829a1e745
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 69 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/vant/src/field/Field.tsx
View File

@ -59,6 +59,7 @@ import type {
FieldFormatTrigger,
FieldValidateError,
FieldAutosizeConfig,
FieldValidationStatus,
FieldValidateTrigger,
FieldFormSharedProps,
} from './types';
@ -135,8 +136,8 @@ export default defineComponent({
setup(props, { emit, slots }) {
const id = useId();
const state = reactive({
status: 'unvalidated' as FieldValidationStatus,
focused: false,
validateFailed: false,
validateMessage: '',
});
@ -181,7 +182,7 @@ export default defineComponent({
rules.reduce(
(promise, rule) =>
promise.then(() => {
if (state.validateFailed) {
if (state.status === 'failed') {
return;
}
@ -192,7 +193,7 @@ export default defineComponent({
}
if (!runSyncRule(value, rule)) {
state.validateFailed = true;
state.status = 'failed';
state.validateMessage = getRuleMessage(value, rule);
return;
}
@ -200,10 +201,10 @@ export default defineComponent({
if (rule.validator) {
return runRuleValidator(value, rule).then((result) => {
if (result && typeof result === 'string') {
state.validateFailed = true;
state.status = 'failed';
state.validateMessage = result;
} else if (result === false) {
state.validateFailed = true;
state.status = 'failed';
state.validateMessage = getRuleMessage(value, rule);
}
});
@ -213,10 +214,8 @@ export default defineComponent({
);
const resetValidation = () => {
if (state.validateFailed) {
state.validateFailed = false;
state.validateMessage = '';
}
state.status = 'unvalidated';
state.validateMessage = '';
};
const validate = (rules = props.rules) =>
@ -224,12 +223,13 @@ export default defineComponent({
resetValidation();
if (rules) {
runRules(rules).then(() => {
if (state.validateFailed) {
if (state.status === 'failed') {
resolve({
name: props.name,
message: state.validateMessage,
});
} else {
state.status = 'passed';
resolve();
}
});
@ -352,7 +352,7 @@ export default defineComponent({
if (typeof props.error === 'boolean') {
return props.error;
}
if (form && form.props.showError && state.validateFailed) {
if (form && form.props.showError && state.status === 'failed') {
return true;
}
});
@ -384,6 +384,8 @@ export default defineComponent({
const getInputId = () => props.id || `${id}-input`;
const getValidationStatus = () => state.status;
const renderInput = () => {
const controlClass = bem('control', [
getProp('inputAlign'),
@ -531,6 +533,7 @@ export default defineComponent({
validate,
formValue,
resetValidation,
getValidationStatus,
});
provide(CUSTOM_FIELD_INJECTION_KEY, {

1
packages/vant/src/field/README.md
View File

@ -327,6 +327,7 @@ import type {
FieldValidateError,
FieldAutosizeConfig,
FieldValidateTrigger,
FieldValidationStatus,
} from 'vant';
```

1
packages/vant/src/field/README.zh-CN.md
View File

@ -346,6 +346,7 @@ import type {
FieldValidateError,
FieldAutosizeConfig,
FieldValidateTrigger,
FieldValidationStatus,
} from 'vant';
```

1
packages/vant/src/field/index.ts
View File

@ -17,6 +17,7 @@ export type {
FieldValidateError,
FieldAutosizeConfig,
FieldValidateTrigger,
FieldValidationStatus,
} from './types';
declare module 'vue' {

3
packages/vant/src/field/types.ts
View File

@ -66,6 +66,8 @@ export type FieldRule = {
formatter?: FiledRuleFormatter;
};
export type FieldValidationStatus = 'passed' | 'failed' | 'unvalidated';
// Shared props of Field and Form
export type FieldFormSharedProps =
| 'colon'
@ -83,6 +85,7 @@ export type FieldExpose = {
rules?: FieldRule[] | undefined
) => Promise<void | FieldValidateError>;
resetValidation: () => void;
getValidationStatus: () => FieldValidationStatus;
/** @private */
formValue: ComputedRef<unknown>;
};

8
packages/vant/src/form/Form.tsx
View File

@ -18,6 +18,7 @@ import type {
FieldTextAlign,
FieldValidateError,
FieldValidateTrigger,
FieldValidationStatus,
} from '../field/types';
import type { FormExpose } from './types';
@ -141,6 +142,12 @@ export default defineComponent({
});
};
const getValidationStatus = () =>
children.reduce<Record<string, FieldValidationStatus>>((form, field) => {
form[field.name] = field.getValidationStatus();
return form;
}, {});
const scrollToField = (
name: string,
options?: boolean | ScrollIntoViewOptions
@ -186,6 +193,7 @@ export default defineComponent({
getValues,
scrollToField,
resetValidation,
getValidationStatus,
});
return () => (

3
packages/vant/src/form/README.md
View File

@ -540,9 +540,10 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Form i
| Name | Description | Attribute | Return value |
| --- | --- | --- | --- |
| submit | Submit form | - | - |
| validate | Validate form | _name?: string \| string[]_ | _Promise_ |
| getValues `v3.4.8` | Get current form values | - | _Record<string, unknown>_ |
| validate | Validate form | _name?: string \| string[]_ | _Promise\<void\>_ |
| resetValidation | Reset validation | _name?: string \| string[]_ | - |
| getValidationStatus `v3.5.0` | Get validation status of all fields，status can be `passed`、`failed`、`unvalidated` | - | _Record\<string, FieldValidationStatus\>_ |
| scrollToField | Scroll to field | _name: string, alignToTop: boolean_ | - |
### Types

5
packages/vant/src/form/README.zh-CN.md
View File

@ -578,9 +578,10 @@ export default {
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| submit | 提交表单，与点击提交按钮的效果等价 | - | - |
| validate | 验证表单，支持传入 `name` 来验证单个或部分表单项 | _name?: string \| string[]_ | _Promise_ |
| getValues `v3.4.8` | 获取所有表单项当前的值 | - | _Record<string, unknown>_ |
| resetValidation | 重置表单项的验证提示，支持传入 `name` 来重置单个或部分表单项 | _name?: string \| string[]_ | - |
| validate | 验证表单，支持传入一个或多个 `name` 来验证单个或部分表单项，不传入 `name` 时，会验证所有表单项 | _name?: string \| string[]_ | _Promise\<void\>_ |
| resetValidation | 重置表单项的验证提示，支持传入一个或多个 `name` 来重置单个或部分表单项，不传入 `name` 时，会重置所有表单项 | _name?: string \| string[]_ | - |
| getValidationStatus `v3.5.0` | 获取所有表单项的校验状态，状态包括 `passed`、`failed`、`unvalidated` | - | _Record\<string, FieldValidationStatus\>_ |
| scrollToField | 滚动到对应表单项的位置，默认滚动到顶部，第二个参数传 false 可滚动至底部 | _name: string, alignToTop: boolean_ | - |
### 类型定义

34
packages/vant/src/form/test/methods.spec.tsx
View File

@ -153,3 +153,37 @@ test('getValues method should return all current values', () => {
expect(formRef.value?.getValues()).toEqual({ A: '123', B: '456' });
});
test('getValidationStatus method should the status of all fields', async () => {
const formRef = ref<FormInstance>();
const rules = getSimpleRules();
mount({
render() {
return (
<Form ref={formRef}>
<Field name="A" rules={rules.rulesA} modelValue="123" />
<Field name="B" rules={rules.rulesB} modelValue="456" />
</Form>
);
},
});
expect(formRef.value?.getValidationStatus()).toEqual({
A: 'unvalidated',
B: 'unvalidated',
});
await formRef.value?.validate();
expect(formRef.value?.getValidationStatus()).toEqual({
A: 'passed',
B: 'passed',
});
formRef.value?.resetValidation();
expect(formRef.value?.getValidationStatus()).toEqual({
A: 'unvalidated',
B: 'unvalidated',
});
});

2
packages/vant/src/form/types.ts
View File

@ -1,5 +1,6 @@
import type { ComponentPublicInstance } from 'vue';
import type { FormProps } from './Form';
import type { FieldValidationStatus } from '../field';
export type FormExpose = {
submit: () => void;
@ -10,6 +11,7 @@ export type FormExpose = {
options?: boolean | ScrollIntoViewOptions | undefined
) => void;
resetValidation: (name?: string | string[] | undefined) => void;
getValidationStatus: () => Record<string, FieldValidationStatus>;
};
export type FormProvide = {