Skip to content

[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

Merged
merged 1 commit into from
Jul 17, 2025

Conversation

xDeSwa
Copy link
Contributor

@xDeSwa xDeSwa commented Jul 15, 2025

Q A
Bug fix? no
New feature? yes
Docs? yes
Issues
License MIT

[LiveComponent]
This PR introduces support for input validation modifiers used in data-model, including:

  • min_length(x)
  • max_length(x)
  • min_value(x)
  • max_value(x)

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.

  <input data-model="name|min_length(3)" />
  <input data-model="price|min_value(1)|max_value(100)" type="number" />

@carsonbot carsonbot added Feature New Feature Status: Needs Review Needs to be reviewed labels Jul 15, 2025
Copy link
Contributor

github-actions bot commented Jul 15, 2025

📊 Packages dist files size difference

ℹ️ No difference in dist packagesFiles.

Copy link
Member

@Kocal Kocal left a 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:

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!

@carsonbot carsonbot added Status: Needs Work Additional work is needed and removed Status: Needs Review Needs to be reviewed labels Jul 15, 2025
@Kocal Kocal changed the title Add validation modifiers (minlength, maxlength, minvalue, maxvalue) to data-model inputs [LiveComponent] Add validation modifiers (minlength, maxlength, minvalue, maxvalue) to data-model inputs Jul 15, 2025
@carsonbot carsonbot added Status: Needs Review Needs to be reviewed and removed Status: Needs Work Additional work is needed labels Jul 16, 2025
@xDeSwa
Copy link
Contributor Author

xDeSwa commented Jul 16, 2025

* `min_length(3)`

* `min_length(1)|max_length(10)`

* `min_value(1990)`

* `max_value(2025)`

* `min_value(1990)|max_value(2025)`

Your suggestion makes more sense, I'll update. thanks

@xDeSwa xDeSwa changed the title [LiveComponent] Add validation modifiers (minlength, maxlength, minvalue, maxvalue) to data-model inputs [LiveComponent] Add validation modifiers (min_length, max_length, min_value, max_value) to data-model inputs Jul 16, 2025
@xDeSwa
Copy link
Contributor Author

xDeSwa commented Jul 16, 2025

i think its ready

Copy link
Member

@Kocal Kocal left a 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!

@carsonbot carsonbot added Status: Needs Work Additional work is needed Status: Needs Review Needs to be reviewed and removed Status: Needs Review Needs to be reviewed Status: Needs Work Additional work is needed labels Jul 16, 2025
@xDeSwa xDeSwa force-pushed the live-component-new-modifiers branch from d9ccaa2 to 7c93466 Compare July 17, 2025 08:50
@xDeSwa
Copy link
Contributor Author

xDeSwa commented Jul 17, 2025

@Kocal check again please

@Kocal Kocal force-pushed the live-component-new-modifiers branch from ea87e0c to ea83f51 Compare July 17, 2025 20:40
@carsonbot carsonbot added Status: Reviewed Has been reviewed by a maintainer and removed Status: Needs Review Needs to be reviewed labels Jul 17, 2025
@Kocal
Copy link
Member

Kocal commented Jul 17, 2025

I did some minor final changes, waiting the CI to be green for merging

@Kocal Kocal force-pushed the live-component-new-modifiers branch from ea83f51 to 7c015e3 Compare July 17, 2025 20:45
@Kocal
Copy link
Member

Kocal commented Jul 17, 2025

Thank you @xDeSwa.

@Kocal Kocal merged commit b233a7b into symfony:2.x Jul 17, 2025
14 of 15 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature New Feature LiveComponent Status: Reviewed Has been reviewed by a maintainer
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants