Customize the form control's input type with Angular Formly
In a previous lesson we've seen how to create a simple input form control. In this lesson we're further looking into customizing the input type, such as rendering HTML form controls of type <input type="number"> with Formly.
Instructor: [0:00] So far, we have only mapped the first property, which is here the first name property. This is a pretty simpler...probably most simplest form configuration with form. We have just form binding, we have input type, input, and we default it to input type text.
[0:17] Let's say we want to map also that age property. What I could do here of course is just copy and paste this, change here the property name and of course also the label. Save this. We'll get automatically also the age property data-bound.
[0:35] Something I probably don't want is to be able to import here characters on that age field. A very simple thing we could do here is to change from input type text, which is the default, to input type number. The only thing I have to do here is to go to that template options and further customize how my form control should look like.
[0:56] By changing it to number, you can now see that if I go to that form here, you can see those little arrows on the side. With those arrows, I can maybe control the number that's incrementing or decrementing. If I place my cursor in here and try to type some characters, it won't work because they are not allowed to be entered into this field.
[1:16] This is basically how you customize your input controls.