Angular 2/Typescript Advanced Form Validation
Like many devs, I have somewhat of a love/hate relationship with forms. Forms are not sexy. Forms do not involve complex, programmatic animation, business logic, or sophisticated interaction, at least on the surface. Yet, forms can be complicated by the need for thorough front-end validation. Do we get any credit for that? Of course not. It’s just a form and forms have been part of the online experience for over 20 years.
It may be surprising for readers of this blog to see a form validation demo as part of the Angular 2/Typescript Math Toolkit series. However, math appears in the most unlikely of places and form validation is no exception.
This demo illustrates some of the new Angular 2 features for form building and processing along with a bit of math to implement a real-time password-strength indicator and perform real-time credit-card number validation.
Demo features include:
- Dynamically switch Bootstrap classes based on control validity
- Create custom validators in Typescript (alpha TSMT validators are used as an example)
- Compose custom valildators with Angular-supplied validators
- Use *ngIf in tandem with validator return info. to display real-time error or hint messages to aid in form completion
- Illustrate a show/hide password facility with binding applied to input type attribute and anchor text
- Illustrate how to implement a real-time password strength indicator with animated color display
- Show how to validate credit-card numbers for theoretical accuracy
- Show how to determine the type of credit card and dynamically display an image of that card type
- Processing of all form controls on submission
The validation strategy is essentially validate-as-you-type. As the user types information into a field, that information is validated in real-time. The user recevies feedback on what is necessary to properly complete each form entry below that form input. Each message varies based on the requested information and the custom validator.
Each custom validator returns results that can be direct-wired into the template and messages are revealed using *ngIf. Success or failure for each field is indicated through the use of Bootstrap classes that are dynamically switched in the template. You could, of course, use Semantic UI or your own custom CSS.
So, if the user fails to properly fill out one field and then tabs to the next field, the incorrect field is highlighted in a reddish color and the relevant error message is displayed underneath. If that field is properly filled out, it is highlighted in a greenish color when the user moves onto the next input. The overall validity of the form is dynamically displayed at the bottom of the UI.
Here is an example
Notice that inputs prior to the credit card number are properly filled out. The Bootsrap has-success class is applied to those controls. The credit card is identified as a Mastercard, but the number is not properly formatted. This is computed using both a length check and Luhn’s algorithm with (alpha) code from the Typescript Math Toolkit. The specific error is displayed below the form input and the field is displayed with the Boostrap has-error class.
Only a few credit cards are ‘accepted’ by the merchant in this demo. The form itself is hypothetical and would be considered incomplete in a production context. For example, there is no input for a CVV number.
Well, enough of the introduction, blah, blah. You want the code, right. As always, complete source, build instructions, etc. are available at a friendly, neighborhood Github near you.