FormBuilder: Max, min and step in formData does not work for number fields

When 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

[nahojd]

@stefansn Well, I have found the bug in the formbuilder, but it needs to be fixed in the code.

In form-builder.js, in the numberAttribute 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:

 const numberAttribute = (attribute, values) => {
    const { class: classname, className, min = 0, max, step, value, ...attrs } = values
    const attrVal = attrs[attribute] || value
    const attrLabel = mi18n.get(attribute) || attribute
    const placeholder = mi18n.get(`placeholder.${attribute}`)

    const inputConfig = {
      type: 'number',
      value: attrVal,
      name: attribute,
      min,
      max,
      step,
      placeholder,
      className: `fld-${attribute} form-control ${classname || className || ''}`.trim(),
      id: `${attribute}-${data.lastID}`,
    }
    //The rest of the method is omitted
}

to this

 const numberAttribute = (attribute, values) => {
    const { class: classname, className, value, ...attrs } = values
    const attrVal = attrs[attribute] || value
    const attrLabel = mi18n.get(attribute) || attribute
    const placeholder = mi18n.get(`placeholder.${attribute}`)

    const inputConfig = {
      type: 'number',
      value: attrVal,
      name: attribute,
      placeholder,
      className: `fld-${attribute} form-control ${classname || className || ''}`.trim(),
      id: `${attribute}-${data.lastID}`,
    }
    //The rest of the method is omitted
}

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.

[nahojd]

I created a pull request for my fix: https://github.com/kevinchappell/formBuilder/pull/1018