vadacl: A Library For Streamlining Form Validation in Angular 2

Angular 2 Add comments

The initial version of my TypeScript-based vadacl library for performing form validation in Angular 2 is now available on GitHub.

vadacl provides the following enhancements to the typical implementation of form validation via the reactive form classes (FormControl, FormGroup, FormArray, and FormBuilder):

  • Instead of configuring all of the validation in the component hosting the form, you can configure certain validations within the data object itself (validation rules that should remain consistent wherever the data object is used in your application), then add to or modify those validation rules in the component to create the final set of validations needed for a given form.

  • The vadacl validation methods add a "message" property to the metadata object returned when the form data fails validation.  This "message" property value is the message meant to be presented to the user, and can be configured and/or overridden at multiple levels:

    • The method level, via a set of default message values
    • The data object
    • The component level

     

  • The Vadacl class, whether used as a superclass for your component or as a service, provides methods for providing an array of validator methods to the FormControls in your form and for displaying the validation error "message" values in your template, removing the need to add multiple DOM elements with "ngIf" directives to display each kind of validation error or to add code to your component to gather and translate validation failures into error messages.

vadacl is (currently) a small library contained in a single folder you can just drop into your Angular application. The GitHub repo contains that folder as part of a small Angular 2.1.1 application containing several working demos of vadacl in action.

Enjoy!

3 responses to “vadacl: A Library For Streamlining Form Validation in Angular 2”

  1. Mike Laird Says:
    This looks very useful, but I have a question about i18n / internationalization. As you know, Angular2 has a custom attribute, i18n, to indicate to its internationalization components that the string should be translated before DI. This process works with almost any computer assisted translation (CAT) support software. How does the message property in vadacl connect to the i18n attribute? If it does not do that now, how and when will i18n attribute be supported? Thanks.
  2. Brian Swartzfager Says:
    @Mike: The short answer is that vadacl's message property doesn't currently interact with the i18n attribute. I hadn't looked at the i18n cookbook page in the official docs prior to your comment. At first glance, it's hard to see how internationalizing messages through that attribute would work if the targeting mechanism for the translation relies on multiple, hard-coded values in the i18n attribute value and the value of the text you want to translate. I'll take a closer look, but I make no promises on if and when I can make that happen.
  3. Brian Swartzfager Says:
    @Mike: I've addressed internationalization in the latest vadacl release (0.1.0).

Leave a Reply