diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap index ba8a1b53d..84de058e3 100644 --- a/components/form/__tests__/__snapshots__/demo.test.js.snap +++ b/components/form/__tests__/__snapshots__/demo.test.js.snap @@ -908,19 +908,7 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = ` -
-
- -
-
-
- -
- - -
-
Forgot password -
+
Forgot password
@@ -937,6 +925,148 @@ exports[`renders ./components/form/demo/normal-login.vue correctly 1`] = ` `; +exports[`renders ./components/form/demo/time-related-controls.vue correctly 1`] = ` +
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+ + +
+
+
+ +
+
+
+ +
+ + +
+
+
+`; + exports[`renders ./components/form/demo/useForm-basic.vue correctly 1`] = `
@@ -1178,6 +1308,276 @@ exports[`renders ./components/form/demo/useForm-trigger.vue correctly 1`] = ` `; +exports[`renders ./components/form/demo/validate-other.vue correctly 1`] = ` +
+
+
+
+
+
China
+ +
+ + +
+
+
+
+
+
+
+
+ + +
+ Please select a country +
+ +
+
+ +
+ + +
+
+
+
+
+
+
+
+ + +
+
+ +
+
+
+
Please select favourite colors +
+ + +
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
machines +
+ +
+ + +
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+ +
+
ABCDEF
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
    +
  • +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    • +
  • +
    +
    +
    +
    +
    • +
+
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+ +
longgggggggggggggggggggggggggggggggggg
+
+
+
+
+
+
+

+

Click or drag file to this area to upload

+

Support for a single or bulk upload.

+
+
+
+
+ +
+ + +
+
+
+ +
+
+
+ +
+ + +
+
+
+`; + exports[`renders ./components/form/demo/validation.vue correctly 1`] = `
diff --git a/components/form/demo/form-in-modal.vue b/components/form/demo/form-in-modal.vue index 97a101126..8c063c5a7 100644 --- a/components/form/demo/form-in-modal.vue +++ b/components/form/demo/form-in-modal.vue @@ -34,7 +34,7 @@ When user visit a page with a list of items, and want to create a new item. The - + diff --git a/components/form/demo/index.vue b/components/form/demo/index.vue index 50faca80e..d1891e72a 100644 --- a/components/form/demo/index.vue +++ b/components/form/demo/index.vue @@ -17,6 +17,8 @@ + + @@ -46,6 +48,8 @@ import UseFormNested from './useForm-nested.vue'; import UseFormTrigger from './useForm-trigger.vue'; import UseFormMerge from './useForm-merge.vue'; import CustomizedFormControls from './customized-form-controls.vue'; +import timeRelatedControlsVue from './time-related-controls.vue'; +import validateOtherVue from './validate-other.vue'; import CN from '../index.zh-CN.md'; import US from '../index.en-US.md'; @@ -53,6 +57,8 @@ export default defineComponent({ US, CN, components: { + timeRelatedControlsVue, + validateOtherVue, Basic, CustomValidation, DynamicFormItem, diff --git a/components/form/demo/time-related-controls.vue b/components/form/demo/time-related-controls.vue new file mode 100644 index 000000000..0e691c6d1 --- /dev/null +++ b/components/form/demo/time-related-controls.vue @@ -0,0 +1,118 @@ + +--- +order: 16 +title: + zh-CN: 时间类控件 + en-US: Time-related Controls +--- + +## zh-CN + +时间类组件的 `value` 类型为 `dayjs` 对象，所以在提交服务器前需要预处理。 + +或者使用 `valueFormat` 组件内部会自动处理。 + +## en-US + +The `value` of time-related components is a `dayjs` object, which we need to pre-process it before we submit to server. + +or use `valueFormat` to format. + + + diff --git a/components/form/demo/validate-other.vue b/components/form/demo/validate-other.vue new file mode 100644 index 000000000..29af1b05e --- /dev/null +++ b/components/form/demo/validate-other.vue @@ -0,0 +1,196 @@ + +--- +order: 24 +title: + zh-CN: 校验其他组件 + en-US: Other Form Controls +--- + +## zh-CN + +以上演示没有出现的表单控件对应的校验演示。 + +## en-US + +Demonstration of validation configuration for form controls which are not shown in the demos above. + + + diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 1f719cdd2..495768913 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -43,6 +43,7 @@ A form consists of one or more form fields whose type includes input, textarea, | name | Form name. Will be the prefix of Field `id` | string | - | 2.0.0 | | scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 | | validateTrigger | Config field validate trigger | string \| string[] | `change` | 2.0.0 | +| noStyle | No style for `true`, used as a pure field control | boolean | false | 3.0 | ### Events diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 439b5be56..a5c9768f6 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -44,6 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg | scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 | | name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | 2.0.0 | | validateTrigger | 统一设置字段校验规则 | string \| string[] | `change` | 2.0.0 | +| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | 3.0 | ### 事件