[LiveComponent] Add validation modifiers (min_length, max_length, min_value, max_value) to data-model inputs

[xDeSwa]

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" />

[github-actions]

📊 Packages dist files size difference

ℹ️ No difference in dist packagesFiles.

[Kocal]

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) and Range(min: a, max :b)
• VeeValidate has min/max for length, and min_value/max_value/between for number range validation
• React Hook Form has minLength and maxLength, and min/max for number range validation
• Vuelidate has minLength/maxLength for length, and minValue/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!

[xDeSwa]

* `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]

i think its ready

[Kocal]

Final review round, and it will be fine for me. Mainly documentation improvements and some TypeScript nitpick

Thanks!

[xDeSwa]

@Kocal check again please

[Kocal]

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

[Kocal]

Thank you @xDeSwa.