Custom Form Field (phone example bugs/feature enhancements)

Bug/Feature enhancement

In this provided example of a phone number: creating-a-custom-form-field-control There is a few things that are lacking:

• Size is not enforced. the Demo has size 3 but a user is allowed to type as many char as they want. – The extra char’s (more than 3) are overflow hidden so you dont see them. – After writing this up, I found this should be maxlength="3"
• Auto advance. It would be nice if the input would auto advance to the next into once the size has been reached.
• The span dashes are selectable (implementation css could turn this off).
• Since this is actually one form control, it would be nice to highlight all number at once and hit delete to clear out the values (but dont know if this is possible since they are separate input boxes)
• The demo works in the link but when you click open in stackblitz … the HTML file is empty … therefore the demo does not work

[michahell]

Can we get someone to look at this? it appears that there is a need for being able to create custom form components, but it is entirely unclear as to how to get validation, value passing and error highlighting working… also see https://github.com/angular/material2/issues/13624

[ZouZou]

I was able to create a custom mat-form-field which implements MatFormFieldControl, I was also able to make it work with formControl however whenever the field is invalid, the color of the entire mat-form-field does not change as a normal mat-form-field, it should turn to red but it’s not, because the class mat-form-field-invalid is not being added.