Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(components): [form] FormContext adds the getField method #14930

Merged
merged 10 commits into from
Dec 31, 2023

Conversation

cloudcome
Copy link
Contributor

@cloudcome cloudcome commented Nov 23, 2023

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

Description

🤖[deprecated] Generated by Copilot at 36b5da1

This pull request enhances the form component and its items by adding a getField function to the parent form and a fieldValue property to the child items. These changes enable easier access and validation of the form values.

Related Issue

Fixes #___.

Explanation of Changes

🤖[deprecated] Generated by Copilot at 36b5da1

  • Add fieldValue property to form-item.vue component to get the value of the form item based on its prop and the parent form's modelValue (link)
  • Add getField function to form.vue component to get the FormItemContext object of a child form item by its prop from the fields array (link)
  • Expose getField function to child form items through the FormContext object returned by the setup function of form.vue and the useForm hook (link)
  • Add getField function to the FormContext interface and fieldValue property to the FormItemContext interface in types.ts to define the types of the new properties and methods (link, link)

Copy link

👋 @cloudcome, seems like this is your first time contribution to element-plus.

  • Please make sure that you have read our guidelines and code of conduct before making a contribution.
  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

@pull-request-triage pull-request-triage bot added 1st contribution Their very first contribution Needs Review labels Nov 23, 2023
Copy link

Hello @cloudcome, thank you for contributing to element-plus, please see our guideline to see how to make contribution

Copy link

github-actions bot commented Nov 23, 2023

@cloudcome cloudcome marked this pull request as ready for review November 23, 2023 06:53
Copy link
Member

@ryuhangyeong ryuhangyeong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you explain your use case?

@cloudcome
Copy link
Contributor Author

@cloudcome
Copy link
Contributor Author

@btea 关注一下

@cloudcome
Copy link
Contributor Author

@ryuhangyeong element-plus playground

@btea @ryuhangyeong 我们内部将 el-form 封装为 my-form,将 el-form-item 封装为 my-form-item 以便更好的接入内部的表单验证系统,它比内置的 async-validator 要更加的本地化,但在表单验证过程中却需要用到表单和字段元信息。这样的话,更多三方开发者可以更好的扩展 el-form 和 el-form-item。

We internally encapsulate el-form as my-form and el-form-item as my-form-item to better connect to the internal form validation system. It is more localized than the built-in async-validator. However, form and field meta-information is required during form validation. In this way, more third-party developers can better extend el-form and el-form-item.

@github-actions github-actions bot added the CommitMessage::Qualified Qualified commit message label Dec 26, 2023
Copy link

github-actions bot commented Dec 26, 2023

🧪 Playground Preview: https://element-plus.run/?pr=14930
Please comment the example via this playground if needed.

Copy link
Member

@ryuhangyeong ryuhangyeong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@btea @chenxch

Can I ask you to review it

Copy link
Collaborator

@btea btea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cloudcome Sorry for replying so late. This modification looks good.

@cloudcome
Copy link
Contributor Author

cloudcome commented Dec 28, 2023

@cloudcome Sorry for replying so late. This modification looks good.

@btea 期待这个 pr 能够被合并。

@ryuhangyeong ryuhangyeong merged commit 736dfa6 into element-plus:dev Dec 31, 2023
8 checks passed
@element-bot element-bot mentioned this pull request Jan 10, 2024
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants