Sharing Top Content from the Angular-sphere.

Custom validators in template driven Angular forms

  • Todd Motto recently published a similar article on “Reactive FormGroup validation with AbstractControl in Angular 2”, which you might definitely want to check out for the reactive kind of approach to this.
  • Then lean back and watch my free Egghead lesson – – Ok, before starting, let’s take a look at our simple Angular, template driven form.
  • For more details on how to setup your initial form binding, take a look at my article on that topic: – – We can make use of the built-in HTML5 validators in Angular just as we were able already in AngularJS (Angular 1.
  • Check out the Forms Validation cookbook on the Angular IO site for more details.
  • Once we have our validation factory funtion, we need to create a directive which mainly serves to attach our validation function onto an existing HTML input control.

Learn what a validation factory function is and how to implement a validation directive to be added to your form controls

Todd Motto recently published a similar article on “Reactive FormGroup validation with AbstractControl in Angular 2”, which you might definitely want to check out for the reactive kind of approach to this.

Don’t wanna read through the entire article? Then lean back and watch my free Egghead lesson

Ok, before starting, let’s take a look at our simple Angular, template driven form.

So far so good, binding works. For more details on how to setup your initial form binding, take a look at my article on that topic:

We can make use of the built-in HTML5 validators in Angular just as we were able already in AngularJS (Angular 1.x). Behind the scenes, Angular recognizes these validators and integrates with them.

Next we can take a closer look at the input control and add a simple attribute for making it a required input field.

This makes our input a required field and when it’s not compiled, the according property will be . You may be wondering where the comes from? It’s the template variable I’ve defined and associated with . This is the way it’s done in the Angular template driven approach.

Note that I’m adding to our event. This way our form won’t submit unless it is valid. Obviously we also need to display some…

Custom validators in template driven Angular forms

Comments are closed, but trackbacks and pingbacks are open.