doc: update form demo

Author: tangjinzhou

components/drawer/demo/form-in-drawer.vue

@@ -108,6 +108,7 @@ Use form in drawer with submit button.
 <script lang="ts">
 import { PlusOutlined } from '@ant-design/icons-vue';
 import { defineComponent, reactive, ref } from 'vue';
+import type { Rule } from 'ant-design-vue/es/form';
 export default defineComponent({
   components: {
     PlusOutlined,
@@ -123,7 +124,7 @@ export default defineComponent({
       description: '',
     });
 
-    const rules = {
+    const rules: Record<string, Rule[]> = {
       name: [{ required: true, message: 'Please enter user name' }],
       url: [{ required: true, message: 'please enter url' }],
       owner: [{ required: true, message: 'Please select an owner' }],

components/form/demo/custom-validation.vue

@@ -45,7 +45,7 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
   </a-form>
 </template>
 <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 type { FormInstance } from 'ant-design-vue';
 interface FormState {
@@ -61,7 +61,7 @@ export default defineComponent({
       checkPass: '',
       age: undefined,
     });
-    let checkAge = async (_rule: RuleObject, value: number) => {
+    let checkAge = async (_rule: Rule, value: number) => {
       if (!value) {
         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 === '') {
         return Promise.reject('Please input the password');
       } else {
@@ -85,7 +85,7 @@ export default defineComponent({
         return Promise.resolve();
       }
     };
-    let validatePass2 = async (_rule: RuleObject, value: string) => {
+    let validatePass2 = async (_rule: Rule, value: string) => {
       if (value === '') {
         return Promise.reject('Please input the password again');
       } 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' }],
       checkPass: [{ validator: validatePass2, trigger: 'change' }],
       age: [{ validator: checkAge, trigger: 'change' }],

components/form/demo/validation.vue

@@ -70,6 +70,7 @@ Just add the `rules` attribute for `Form` component, pass validation rules, and
 import { Dayjs } from 'dayjs';
 import { defineComponent, reactive, ref, toRaw } from 'vue';
 import type { UnwrapRef } from 'vue';
+import type { Rule } from 'ant-design-vue/es/form';
 
 interface FormState {
   name: string;
@@ -92,7 +93,7 @@ export default defineComponent({
       resource: '',
       desc: '',
     });
-    const rules = {
+    const rules: Record<string, Rule[]> = {
       name: [
         { required: true, message: 'Please input Activity name', trigger: 'blur' },
         { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },

components/form/interface.ts

@@ -81,7 +81,7 @@ interface BaseRule {
   /** Customize rule level `validateTrigger`. Must be subset of Field `validateTrigger` */
   validateTrigger?: string | string[];
   /** Check trigger timing */
-  trigger?: 'blur' | 'change' | ['change', 'blur'];
+  trigger?: 'blur' | 'change' | Array<'change' | 'blur'>;
 }
 
 type AggregationRule = BaseRule & Partial<ValidatorRule>;