How to set mask on smart-form-control in HTML

[klslead]

Hello,  I have created a HTML base smart form and am having issues with “number” type and “mask” type.  The “number” type is not allowing decimal entry, which I need.
The “mask” type is for phone numbers.  None of these are working either.
There is virtually no documentation for the types, only examples.
Here is the code:
<div>
<div><smart-form-control placeholder=”COD Amount” control-type=”number” data-field=”codamount” label=”COD Amount” class=”underlined” prepend=”$”></smart-form-control></div>
</div>
<div></div>
<div>
<div>
<div><smart-form-control placeholder=”Daytime Phone #” required control-type=”mask” id=”daytimephone” data-field=”daytimephone” label=”Daytime Phone #” mask=”(###) ### – ####” class=”underlined”></smart-form-control></div>
</div>
<div>Any help would be much appreciated.</div>
<div>Thank you!</div>
</div>

[admin]

Hi klslead,
Documentation about types can be found here: https://www.htmlelements.com/docs/form-api/. For setting up a Form with Mask and Number fields, please refer to: https://www.htmlelements.com/demos/form/datetime/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[klslead]

Yes, I was using those resources, including datetime, but the information is lacking.  But, I did just figure out part of the reason why my code doesn’t work and the datetime example does – you’re pre-populating the datetime form with data at creation.  When I commented out the form.value= {}; portion of the js file, no masks are present.  I can’t enter a decimal value in the “Number Input” field from the keyboard, but I can cut and paste a decimal value.  The phone mask doesn’t appear upon rendering and doesn’t appear to the user until the minimum 2digits have been entered and the field loses focus.
That said, I still don’t have an answer to my question of how to specify the mask inside the smart-form-control tag.  If I can get this answered I should be able to work around the other issues.
Thank you!

[admin]

Hi klslead,
To initialize custom fields as in the example I pointed out, you should use Javascript, not HTML.
Example:

{
		dataField: 'mask',
		label: 'Mask Input',
		controlType: 'mask',
		controlOptions: {
			placeholder: 'Phone number',
			mask: '+1 (###) ### - ####',
		},
		required: true
	},

Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts