FormBuilder: Max, min and step in formData does not work for number fields
See original GitHub issueWhen setting formData in formbuilder options, min, max and step for number fields does not work. They are not set in the UI for designing the form, and they are not present when the formdata is generated after save. What’s more, if I set the value for a number field, it sets max, min and step as well.
Example options that does not work:
options = {
formData:
'[{"type":"number", "label":"Max and min does not work for number", "max":100, "min":10,"step":2},' +
'{"type":"number", "label":"Value overwrites max min and step", "max":100, "min":10,"step":2,"value":"50"},' +
'{"type":"text", "label":"Maxlength works for text", "maxlength":5}]'
};
Example in codepen: https://codepen.io/nahojd/pen/YzzGXJV
Environment Details:
- formBuilder Version: 3.2.5
- Browser: Firefox
- OS: Windows
Issue Analytics
- State:
- Created 4 years ago
- Comments:8 (3 by maintainers)
Top Results From Across the Web
Angular 4 Form Validators - minLength & maxLength does not ...
For a number field, you can validate min and max values using built in Angular validation, like this: .ts import { FormBuilder, FormGroup ......
Read more >Working with Angular 4 Forms: Nesting and Input Validation
In this article, you will learn how you can work with forms and perform form validation with ease in your Angular application. In...
Read more >Form Elements, Advanced Field in Form Builder
Min, Max, and Step Attributes. These attributes can be used in conjunction with custom-type=number; to create a number type input with the HTML5...
Read more >Angular Forms and Validations
Don't worry, we will also see the differences between template driven ... of working directly with form control objects is that value and ......
Read more >Fields - Form Builder - Filament
Please note that disabling a field does not prevent it from being saved, and a skillful ... ->maxValue(100) // Set the maximum value...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@stefansn Well, I have found the bug in the formbuilder, but it needs to be fixed in the code.
In
form-builder.js
, in thenumberAttribute
function starting on line 706, it actually removes the min, max and step attributes and passes them on as attributes instead of values, which sounds good, but is wrong. The result is that instead of the configuration input fields for min, max and step having the value of min, max and step respectively, instead they get the actual min, max and step attributes.So the solution is to change this:
to this
That seems to fix the problem completely. I have fixed in a fork of this repository: https://github.com/nahojd/formBuilder/commit/1d4220205c5567f456bf895b2fbfa65b0ae62c25
@kevinchappell have I understood this correctly, and in that case, would you like a pull request or just fix it yourself, it’s a very minor fix as you can see.
I created a pull request for my fix: https://github.com/kevinchappell/formBuilder/pull/1018