feat(Forms): add isValid to Form.Visibility for showing content based on the validation of a field
#4038
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
I made a CSB where I try to use this feature with EDIT: I've made a new CSB now which correctly use the build of this PR EDIT2: I've made an even newer CSB, which use the latest build of this PR. |
langz
changed the title
hasValidated to Form.Visibility for showing content based on the validation of another fieldhasValidated to Form.Visibility for showing content based on the validation of a field
langz
reviewed
Oct 2, 2024
packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Visibility/info.mdx
Outdated
Show resolved
Hide resolved
langz
reviewed
Oct 2, 2024
packages/dnb-eufemia/src/extensions/forms/Form/Visibility/Visibility.tsx
Show resolved
Hide resolved
|
Some thoughts/suggestions/alternatives regarding naming of the
|
…t based on the validation of another field
…rms/Form/Visibility/info.mdx
…properties table.
tujoworker
force-pushed
the
feat/visibility-validate
branch
from
5bfaef7
to
e4a2423
Compare
|
I changed it to be |
langz
changed the title
hasValidated to Form.Visibility for showing content based on the validation of a fieldisValid to Form.Visibility for showing content based on the validation of a field
langz
approved these changes
Oct 8, 2024
tujoworker
pushed a commit
that referenced
this pull request
Oct 11, 2024
## [10.52.0](v10.51.2...v10.52.0) (2024-10-11) ### 📝 Documentation * **NationalIdentityNumber:** add docs about validation ([#4077](#4077)) ([51bfd80](51bfd80)) * **OrganizationNumber:** adds docs about validation ([#4078](#4078)) ([c785c51](c785c51)) ### 🐛 Bug Fixes * **Autocomplete:** Show whole suggestion list after item selection ([#4060](#4060)) ([0acf061](0acf061)) * **Field.NationalIdentityNumber:** validate on all digits(not only 11 digits) ([#4079](#4079)) ([7c34fc9](7c34fc9)) * **Field.OrganizationNumber:** should validate on all digits(not only when 9) ([#4071](#4071)) ([08a4b51](08a4b51)) * **Forms:** add support for `Form.SubmitConfirmation` inside Wizard ([#4088](#4088)) ([e1167a4](e1167a4)), closes [#4086](#4086) * **Forms:** don't call internal `exportValidators` when they not are exported as an array ([#4113](#4113)) ([cd54ed0](cd54ed0)), closes [#4106](#4106) * **Forms:** ensure `emptyValue` is set in the data context when defined ([#4111](#4111)) ([dcc5694](dcc5694)), closes [#4070](#4070) * **Forms:** ensure `onBlurValidator` gets called when `validateInitially` is true ([#4069](#4069)) ([59cf6c5](59cf6c5)), closes [#4068](#4068) [#4066](#4066) * **Forms:** ensure Field.SelectCountry has a fallback locale (nb-NO) ([#4114](#4114)) ([568229a](568229a)) * **Forms:** ensure Form.clearData works in React.StrictMode ([#4053](#4053)) ([da0c93a](da0c93a)), closes [#4048](#4048) * **Forms:** Fix use of unpolyfilled structuredClone in useData hook ([#4108](#4108)) ([1f59f10](1f59f10)) * **Forms:** keep `Iterate.EditContainer` open when falsy value or empty object was given as the iterate value ([#4087](#4087)) ([e932059](e932059)), closes [#4046](#4046) * **Forms:** show error on every value change when using exported validators ([#4068](#4068)) ([cab6d01](cab6d01)), closes [#4067](#4067) * **Icon:** icon property typing should accept FormStatus icons ([#4091](#4091)) ([f49eb34](f49eb34)) * **NationalIdentityNumber:** use `onBlurValidator` instead of `validator` ([#3982](#3982)) ([0a93755](0a93755)) * **Typography:** match medium heading font size in Sbanken theme ([#4039](#4039)) ([ce50529](ce50529)) ### ✨ Features * **Forms:** add `bubbleValidation` to Form.Isolation and Iterate.PushContainer to prevent the form from being submitted when there are fields with errors ([#4103](#4103)) ([880f870](880f870)), closes [#4072](#4072) * **Forms:** add `createMinimumAgeValidator` to Field.NationalIdentityNumber make a customizable `adultValidator` ([#4057](#4057)) ([6c20ba2](6c20ba2)) * **Forms:** add `Form.useSnapshot` hook to handle snapshots of data ([#4102](#4102)) ([d451793](d451793)) * **Forms:** add `isolatedData` prop to `Iterate.PushContainer` ([#4076](#4076)) ([ede5f8e](ede5f8e)) * **Forms:** add `isValid` to Form.Visibility for showing content based on the validation of a field ([#4038](#4038)) ([7536752](7536752)) * **Forms:** add `Iterate.ItemNo` component ([#4095](#4095)) ([c736c9e](c736c9e)) * **Forms:** add `transformLabel` to all Value.* component ([#4056](#4056)) ([d63e472](d63e472)) * **Forms:** add support for `defaultValue` (and `value`) for fields used in `Iterate.Array` ([#3987](#3987)) ([afbdddf](afbdddf)), closes [#3882](#3882) * **Forms:** add support for `id` for when using dynamic steps with `activeWhen` ([#4093](#4093)) ([248da92](248da92)) * **Forms:** remove internal pattern from `Field.NationalIdentityNumber` in favor of the internal validator ([#4098](#4098)) ([fb35722](fb35722)) * **Forms:** remove internal pattern from `Field.OrganizationNumber` in favor of the internal validator ([#4092](#4092)) ([e829f8b](e829f8b)), closes [#4073](#4073) * **Skeleton:** stop animation after 30 seconds ([#3479](#3479)) ([f67b3bb](f67b3bb)) * **Value.PhoneNumber and NumberFormat:** displays country code using prefix `+` instead of `00` ([#4051](#4051)) ([fb363d0](fb363d0))
|
🎉 This PR is included in version 10.52.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
As of now, the Visibility does only react on data content, but not on validation.
This PR is an attempt to add support for showing something based on the validation result by another field:
Here is a demo.
Why first act on the blur event?
To avoid hiding/showing its content during e.g. typing, it will wait until the field has blurred.
E.g. the name field does validate negatively when a space is added after a name. During typing are we going then from false to true to false several times.
This blur behavior could for sure be omitted with a property such as
continuously: true(a little bit likecontinuousValidation).