JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Text Boxes & Inputs › How to set mask on smart-form-control in HTML
Tagged: form, form component, form control, javascript form
- This topic has 3 replies, 2 voices, and was last updated 3 years, 4 months ago by
admin.
-
AuthorPosts
-
April 27, 2021 at 5:14 am #101746
klslead
MemberHello, 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>April 27, 2021 at 5:41 am #101747admin
KeymasterHi 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/April 27, 2021 at 12:50 pm #101749klslead
MemberYes, 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!April 27, 2021 at 1:00 pm #101750admin
KeymasterHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.