Element UI to Element Plus - Forms validation

[jesspsilva]

Hello,

We're currently in the process of migrating our web-app from Vue 2 to Vue 3, and as part of this transition, we're shifting from Element UI to Element Plus. However, we've encountered challenges, particularly concerning form validations.

Specifically, we need to dynamically enable/disable certain buttons based on the validity state of various form fields. Our current implementation relies on accessing data from this.$refs.form.fields, such as field.fieldValue, field.validateState, and field.required. However, it seems that in Element Plus, there's no direct method to access the fields object of the form.
Could you confirm if this is the case? Is there an alternative approach to retrieve this data?

[warmthsea]

elment-plus only expose out methods that are consistent with the documentation.

https://github.com/element-plus/element-plus/blob/d468b38494441d7eeabe7e029e184223f03487d2/packages/components/form/src/form.vue#L183C1-L204C3

You are using the implicit method of element-ui (The documentation does not explain), because vue2 throws all events directly, while element-plus uses defineExpose of vue > 3.2

You seem to want this, But I'm not sure it's good to expose fields out.
This requires view from the maintainer.

https://github.com/element-plus/element-plus/blob/d468b38494441d7eeabe7e029e184223f03487d2/packages/components/form/src/form.vue#L33C1-L33C37

[btea]

IMO, Maybe we can export fields directly. WDYT? cc @element-plus/backers

[tolking]

agree

[FrontEndDog]

agree

[jesspsilva]

@warmthsea Thank you for your quick response and for addressing the issue promptly. Could you provide a timeline for when this will be implemented in production?

[warmthsea]

Need to wait for the last approver to approve before merging into the master branch.
Release builds require @iamkun collaboration. I'm just a contributor.

[warmthsea]

#16755

[warmthsea]

@jesspsilva
The latest version containing this feature has been released. (2.7.3)
If you need it, upgraded version.

https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGVsLWZvcm1cbiAgICByZWY9XCJmb3JtUmVmXCJcbiAgICBzdHlsZT1cIm1heC13aWR0aDogNjAwcHhcIlxuICAgIDptb2RlbD1cIm51bWJlclZhbGlkYXRlRm9ybVwiXG4gICAgbGFiZWwtd2lkdGg9XCJhdXRvXCJcbiAgICBjbGFzcz1cImRlbW8tcnVsZUZvcm1cIlxuICA+XG4gICAgPGVsLWZvcm0taXRlbVxuICAgICAgbGFiZWw9XCJhZ2VcIlxuICAgICAgcHJvcD1cImFnZVwiXG4gICAgICA6cnVsZXM9XCJbXG4gICAgICAgIHsgcmVxdWlyZWQ6IHRydWUsIG1lc3NhZ2U6ICdhZ2UgaXMgcmVxdWlyZWQnIH0sXG4gICAgICAgIHsgdHlwZTogJ251bWJlcicsIG1lc3NhZ2U6ICdhZ2UgbXVzdCBiZSBhIG51bWJlcicgfSxcbiAgICAgIF1cIlxuICAgID5cbiAgICAgIDxlbC1pbnB1dFxuICAgICAgICB2LW1vZGVsLm51bWJlcj1cIm51bWJlclZhbGlkYXRlRm9ybS5hZ2VcIlxuICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgIGF1dG9jb21wbGV0ZT1cIm9mZlwiXG4gICAgICAvPlxuICAgIDwvZWwtZm9ybS1pdGVtPlxuICAgIDxlbC1mb3JtLWl0ZW0+XG4gICAgICA8ZWwtYnV0dG9uIHR5cGU9XCJwcmltYXJ5XCIgQGNsaWNrPVwic3VibWl0Rm9ybShmb3JtUmVmKVwiPlN1Ym1pdDwvZWwtYnV0dG9uPlxuICAgICAgPGVsLWJ1dHRvbiBAY2xpY2s9XCJyZXNldEZvcm0oZm9ybVJlZilcIj5SZXNldDwvZWwtYnV0dG9uPlxuICAgIDwvZWwtZm9ybS1pdGVtPlxuICA8L2VsLWZvcm0+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IGxhbmc9XCJ0c1wiIHNldHVwPlxuaW1wb3J0IHsgcmVhY3RpdmUsIHJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB0eXBlIHsgRm9ybUluc3RhbmNlIH0gZnJvbSAnZWxlbWVudC1wbHVzJ1xuXG5jb25zdCBmb3JtUmVmID0gcmVmPEZvcm1JbnN0YW5jZT4oKVxuXG5jb25zdCBudW1iZXJWYWxpZGF0ZUZvcm0gPSByZWFjdGl2ZSh7XG4gIGFnZTogJycsXG59KVxuXG5jb25zdCBzdWJtaXRGb3JtID0gKGZvcm1FbDogRm9ybUluc3RhbmNlIHwgdW5kZWZpbmVkKSA9PiB7XG4gIGlmICghZm9ybUVsKSByZXR1cm5cbiAgY29uc29sZS5sb2coZm9ybUVsKVxuICBmb3JtRWwudmFsaWRhdGUoKHZhbGlkKSA9PiB7XG4gICAgaWYgKHZhbGlkKSB7XG4gICAgICBjb25zb2xlLmxvZygnc3VibWl0IScpXG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnNvbGUubG9nKCdlcnJvciBzdWJtaXQhJylcbiAgICB9XG4gIH0pXG59XG5cbmNvbnN0IHJlc2V0Rm9ybSA9IChmb3JtRWw6IEZvcm1JbnN0YW5jZSB8IHVuZGVmaW5lZCkgPT4ge1xuICBpZiAoIWZvcm1FbCkgcmV0dXJuXG4gIGZvcm1FbC5yZXNldEZpZWxkcygpXG59XG48L3NjcmlwdD5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcbiAgXCJpbXBvcnRzXCI6IHt9XG59IiwidHNjb25maWcuanNvbiI6IntcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXG4gICAgXCJqc3hcIjogXCJwcmVzZXJ2ZVwiLFxuICAgIFwibW9kdWxlXCI6IFwiRVNOZXh0XCIsXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxuICAgIFwidHlwZXNcIjogW1wiZWxlbWVudC1wbHVzL2dsb2JhbC5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=

[jesspsilva]

@warmthsea, we have successfully updated the version. Thanks a lot for your help 🚀

[warmthsea]

Can you marked as answer ? 😃 I want to get this medal, something like #16783 (comment)

[warmthsea]

😆