doc: update form demo
parent
dd0653249d
commit
7d9edbfde0
|
@ -108,6 +108,7 @@ Use form in drawer with submit button.
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||||
import { defineComponent, reactive, ref } from 'vue';
|
import { defineComponent, reactive, ref } from 'vue';
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
PlusOutlined,
|
PlusOutlined,
|
||||||
|
@ -123,7 +124,7 @@ export default defineComponent({
|
||||||
description: '',
|
description: '',
|
||||||
});
|
});
|
||||||
|
|
||||||
const rules = {
|
const rules: Record<string, Rule[]> = {
|
||||||
name: [{ required: true, message: 'Please enter user name' }],
|
name: [{ required: true, message: 'Please enter user name' }],
|
||||||
url: [{ required: true, message: 'please enter url' }],
|
url: [{ required: true, message: 'please enter url' }],
|
||||||
owner: [{ required: true, message: 'Please select an owner' }],
|
owner: [{ required: true, message: 'Please select an owner' }],
|
||||||
|
|
|
@ -45,7 +45,7 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
|
||||||
</a-form>
|
</a-form>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { RuleObject } from 'ant-design-vue/es/form';
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
import { defineComponent, reactive, ref } from 'vue';
|
import { defineComponent, reactive, ref } from 'vue';
|
||||||
import type { FormInstance } from 'ant-design-vue';
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
interface FormState {
|
interface FormState {
|
||||||
|
@ -61,7 +61,7 @@ export default defineComponent({
|
||||||
checkPass: '',
|
checkPass: '',
|
||||||
age: undefined,
|
age: undefined,
|
||||||
});
|
});
|
||||||
let checkAge = async (_rule: RuleObject, value: number) => {
|
let checkAge = async (_rule: Rule, value: number) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
return Promise.reject('Please input the age');
|
return Promise.reject('Please input the age');
|
||||||
}
|
}
|
||||||
|
@ -75,7 +75,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
let validatePass = async (_rule: RuleObject, value: string) => {
|
let validatePass = async (_rule: Rule, value: string) => {
|
||||||
if (value === '') {
|
if (value === '') {
|
||||||
return Promise.reject('Please input the password');
|
return Promise.reject('Please input the password');
|
||||||
} else {
|
} else {
|
||||||
|
@ -85,7 +85,7 @@ export default defineComponent({
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
let validatePass2 = async (_rule: RuleObject, value: string) => {
|
let validatePass2 = async (_rule: Rule, value: string) => {
|
||||||
if (value === '') {
|
if (value === '') {
|
||||||
return Promise.reject('Please input the password again');
|
return Promise.reject('Please input the password again');
|
||||||
} else if (value !== formState.pass) {
|
} else if (value !== formState.pass) {
|
||||||
|
@ -95,7 +95,7 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const rules = {
|
const rules: Record<string, Rule[]> = {
|
||||||
pass: [{ required: true, validator: validatePass, trigger: 'change' }],
|
pass: [{ required: true, validator: validatePass, trigger: 'change' }],
|
||||||
checkPass: [{ validator: validatePass2, trigger: 'change' }],
|
checkPass: [{ validator: validatePass2, trigger: 'change' }],
|
||||||
age: [{ validator: checkAge, trigger: 'change' }],
|
age: [{ validator: checkAge, trigger: 'change' }],
|
||||||
|
|
|
@ -70,6 +70,7 @@ Just add the `rules` attribute for `Form` component, pass validation rules, and
|
||||||
import { Dayjs } from 'dayjs';
|
import { Dayjs } from 'dayjs';
|
||||||
import { defineComponent, reactive, ref, toRaw } from 'vue';
|
import { defineComponent, reactive, ref, toRaw } from 'vue';
|
||||||
import type { UnwrapRef } from 'vue';
|
import type { UnwrapRef } from 'vue';
|
||||||
|
import type { Rule } from 'ant-design-vue/es/form';
|
||||||
|
|
||||||
interface FormState {
|
interface FormState {
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -92,7 +93,7 @@ export default defineComponent({
|
||||||
resource: '',
|
resource: '',
|
||||||
desc: '',
|
desc: '',
|
||||||
});
|
});
|
||||||
const rules = {
|
const rules: Record<string, Rule[]> = {
|
||||||
name: [
|
name: [
|
||||||
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
{ required: true, message: 'Please input Activity name', trigger: 'blur' },
|
||||||
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||||
|
|
|
@ -81,7 +81,7 @@ interface BaseRule {
|
||||||
/** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
|
/** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
|
||||||
validateTrigger?: string | string[];
|
validateTrigger?: string | string[];
|
||||||
/** Check trigger timing */
|
/** Check trigger timing */
|
||||||
trigger?: 'blur' | 'change' | ['change', 'blur'];
|
trigger?: 'blur' | 'change' | Array<'change' | 'blur'>;
|
||||||
}
|
}
|
||||||
|
|
||||||
type AggregationRule = BaseRule & Partial<ValidatorRule>;
|
type AggregationRule = BaseRule & Partial<ValidatorRule>;
|
||||||
|
|
Loading…
Reference in New Issue