-
-
Notifications
You must be signed in to change notification settings - Fork 370
[LiveComponent] Add validation modifiers (min_length, max_length, min_value, max_value) to data-model inputs #2926
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
Conversation
📊 Packages dist files size differenceℹ️ No difference in dist packagesFiles. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's super interesting, thanks for opening this PR!
I'm wondering about the names of these new modifiers, given Symfony and some popular form validation JS libraries:
- Symfony has
Length(min: a, max: b)
andRange(min: a, max :b)
- VeeValidate has
min
/max
for length, andmin_value
/max_value
/between
for number range validation - React Hook Form has
minLength
andmaxLength
, andmin
/max
for number range validation - Vuelidate has
minLength
/maxLength
for length, andminValue
/maxValue
/between
for number range validation
If it is possible, I would like to see an advanced syntax closest to what Symfony can provide:
length(min: 3)
length(min: 1, max:10)
range(min: 1990)
range(max: 2025)
range(min: 1990, max: 2025)
Do you think it could be possible?
EDIT: By reading existing tests, examples, and source code, I don't think using directive(arg:value)
or directive(arg=value)
could be possible since it may breaks addClass
(.arg\:value
or .arg\=value
can be used a CSS selector).
Maybe... length({ min: 3})
or length{min: 3}
..?
Otherwise, we can keep the simple syntax but we should add the _
after min
and max
:
min_length(3)
min_length(1)|max_length(10)
min_value(1990)
max_value(2025)
min_value(1990)|max_value(2025)
Also, please ensure to keep the CI green and format the JavaScript code by following the commands listed here https://github.com/symfony/ux/blob/2.x/CONTRIBUTING.md#working-with-assets, it would also help to reduce syntax noices in the PR.
Thanks!
Your suggestion makes more sense, I'll update. thanks |
i think its ready |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Final review round, and it will be fine for me. Mainly documentation improvements and some TypeScript nitpick
Thanks!
d9ccaa2
to
7c93466
Compare
@Kocal check again please |
ea87e0c
to
ea83f51
Compare
I did some minor final changes, waiting the CI to be green for merging |
…_value, max_value) to data-model inputs
ea83f51
to
7c015e3
Compare
Thank you @xDeSwa. |
[LiveComponent]
This PR introduces support for input validation modifiers used in data-model, including:
These modifiers prevent model updates and AJAX calls if the user input doesn't meet the validation constraints.
It helps avoid unnecessary re-renders and network traffic.
They can be combined with other modifiers like debounce.