Version 0.0.7 of my sandbox GuildRunner Angular 2 application is a refactor of the sandbox Chapter form I created in the previous version. I refactored the form, which uses Angular's reactive form classes (FormControl, FormGroup, FormArray, and FormBuilder) to use a small validation library I created called vadacl.
The two main features of vadacl are:
It allows developers to set validation rules for the properties of a domain class at both the domain class level and the component level (because some validations are there to ensure the data can be persisted back to the server, and those validations should be set on the domain class so they are consistent throughout the application).
It gives developers the ability to set a "message" value that will be part of the metadata object returned from a validator when the data is invalid (which you can see in action in the refactored sandbox Chapter form).
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.
Version 0.0.6 of my sandbox GuildRunner Angular 2 application adds an example of using the reactive form and Validator classes provided by Angular 2. The example was added to the sandbox collection of components rather than the main application, as I plan on taking what I learned from the exercise and expanding on it when I write the "real" forms.
Version 0.0.5 of my GuildRunner sandbox Angular 2 application was focused on updating the model object graph of the application (mainly to provide more opportunities for exploring forms), which included the following changes:
- Removed the Address domain class and replaced it with a Location object containing traditional, basic address properties.
- Created a Person class containing properties such as first name and last name as well as a "residence" property that is an instance of Location.
- Added the concept of "Chapter", where each Guild has a number of geographically-based Chapters. Each Chapter domain class is associated with a Guild and has a "location" property that is an instance of ChapterLocation, another new domain class that extends Location and contains properties like "floors" and "entryPoints".
- Removed the Member domain class and replaced it with ChapterMember, which extends the Person class.
- Simplified the Guild domain class.
- Created new master list view for the Chapters and ChapterMembers and added them to the navigation bar.