...
/Building a Phone Number Input the Right Way
Building a Phone Number Input the Right Way
Let's explore the different types of forms in Angular.
The right way
Now, how would we build a phone number input the right way? A good form input should:
-
Clearly show what sort of format is recommended.
-
Accept all kinds of formats, regardless of whether they’re pasted, typed, or entered through the browser’s autofill tool.
-
Reformat the phone number in an easy-to-read way if possible.
-
Clearly indicate problems when they occur and what needs to be done to fix them.
This is possible using just techniques from the first section of this course.
fromEvent('blur', myInput).pipe(pluck('target', 'value'),map(phoneNumber => phoneNumber.replace(/[^\d]*/g, '')),filter(phoneNumber => phoneNumber.length === 10),// ...etc
While you could build out a large form to this spec using RxJS alone, managing all of the elements would get complicated quickly. Thankfully, Angular has an answer to make building useful forms easier than ever.