651.288.7000 info@intertech.com

In my previous article, I introduced new web controls for John Culviner’s Angular Agility.  In this article, I’m going to shift the focus to form validation.  One of the nice things about Angular Agility is the ability to define validation for a form in the controller.  So instead of adding a ‘required’ attribute to your input control, you can simply define it like so in the controller:

This got me excited because if we’re in an AngularJS controller, we can call a service to get the validations using $http.get.  And if we can make an ajax call, we can call the server to get the validation.  Take it one step further, why not have the same validation on the server objects that are on the Angular Agility form?  Well, that’s what I’ve done for a Web API server.  You specify validations in a DTO class using System.ComponentModel.DataAnnotations validation attributes and those validations are downloaded when the web site form is shown so that you don’t have to rewrite the same validations in Angular Agility.

Source code and sample app:  https://github.com/IntertechInc/aa-validation-from-server

NuGet package:  https://www.nuget.org/packages/Intertech.Validation.AA/

Angular Agility validation:  https://github.com/AngularAgility/AngularAgility/wiki/External-Form-Configuration

SERVER CODE

The server requires some controller code to pull down the validations and of course the validations on some class – typically the class will correspond to the fields on the form.

CLASS WITH VALIDATIONS

The class shown here contains all of the validations that can be duplicated on the Angular Agility form:

You can see that there is nothing special about these validations and they should be very familiar to a .NET developer.

API CONTROLLER

The Web API controller code is responsible for getting the validations from the class that has the validations.  To make this easy for you, I’ve created a NuGet Package that uses reflection to get the validations and transforms them into a JSON object that is in the format that Angular Agility expects.  If you are using a validation that isn’t shown in the class above, it is just ignored and won’t be validated on the web form.

Notes:

  • Using attribute routing but it isn’t required
  • EnableCors – change to the website address for cross-site calls
  • ValidationHelper is in NuGet Package, call GetValidations
    • dtoObjectName is the name of the class in your DTO (class w/validations) assembly
    • jsonObjectName is the name of the model object on your website
    • “AATestAPI.Models” is an alternate namespace…by default it uses the assembly’s namespace
    • “AATestAPI” is the name of the assembly to load for reflecting the class properties that have validation attributes

ANGULARJS CODE

The AngularJS code is now ready to consume the validations we just defined on the server.  A required prerequisite is UI Router.

VIEW

The following is the definition of the view (note the awesomeness of one line input tags):

Notes:

  • aa-configured-form tells Angular Agility we are configuring this in the controller
  • validation-config tells Angular Agility where in $scope to find the validations
  • The ‘model’ should match what we pass into the getValidations call later
  • The model property names should match the server property names

UI ROUTER ROUTE DEFINITION

Angular Agility requires that the validation-config value be available (in our case $scope.formconfig) when the controller is created and run.  That’s a problem for us because we plan to call $http.get, which is an asynchronous call.  So if we call it in the controller, we will just get a promise and the validations will not be available to the form.  Thankfully, UI Router allows us to resolve things so they are available when the controller is created.  Read about it here.

The following code shows how to define the route so that validationData can be injected into the controller:

The important thing to note here is the ‘resolve’ property.  The ‘validationService’ property is the name of the service that will be getting the validations.  See the GitHub source for the validationService.

The parameters to the getValidations function are simply the name of the server class that has the validations (‘ValidationTest’) and the name of the model being used on the form (‘model’).

Since getValidations returns a promise, UI router waits until the promise is resolved before creating the controller.

CONTROLLER

Now the controller is ready to set up the validations for the form.

Notes:

  • validationData can be injected because of the resolve property in the route definition
  • Set the model to an empty object to initialize the two-way binding
  • Set $scope.formconfig to validationData.data to initialize validation, take necessary precautions in case something goes wrong

RESULTS

This is now what we get on the AngularJS site for validation:

AA Validation From Server

To make the messages look nicer, you can use the Display attribute.  For example, add the [Display(“Credit card”)] attribute on the CreditCard property.  The message will then read “Credit card is an invalid credit card number.”

Also, if you don’t like the default error messages, they can be overridden by using the ErrorMessage parameter (see the Integer String property for an example.)

CONCLUSION

Angular Agility definitely improves AngularJS validation since the validations can be defined in the controller and there is so little markup required.  Getting the validation from the server is an even bigger win since now the validation doesn’t have to be written twice.

For a deeper dive see these AngularJS training classes from Intertech. Or, learn more about our AngularJS consulting team for help with a project or application.

Like What You've Read?

Subscribe to the Blog.

Every Friday we send that week's content from our Developers via email. Try it out!

Some ad blockers can block the form below.

You have Successfully Subscribed!

Pin It on Pinterest

Share This