Components: Custom Form Field (phone example bugs/feature enhancements)

[tmburnell]

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

[tschock]

Adding some additions to what @tmburnell has already stated:

The example is also missing the key components of how to actually implement this with formControl and ngControl which is the whole basis of using forms in Angular. I feel that this is a very important component of building custom form fields and should be include in the guide. As for the StackBlitz demo whenever I try to load the page I get the "Starting Dev Server" loading screen and it never moves passed it.

[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.

[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

[Wildhammer]

@tmburnell this might help you (auto-advance):
https://medium.com/@wildhammer/angular-material-phone-input-2283c7bc3372

I will submit a pull request for this

[Wildhammer]

@mmalerba how is material.angular.io updated? I still don't see these changes I made under the guide for a custom field on the website.

[tmburnell]

@Wildhammer The only thing i see that your doc updates did not cover was being able to clear the whole field at once.
you have to tab into each our start at the end and hit delete 10 times

[Wildhammer]

That wouldn't be possible with this way of implementation (using three separate fields). For that, you need only one input that styles the text while typing (adding dashes or paran for the area code).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}