Angular – Custom Form Validation

In the last article of this Angular tutorial, we discussed Form Validation. In this section, we are going to create custom form validation of what we did in the previous tutorial article.

Validation refers to the three sets of CSS style validation (ng-valid/invalid, ng-touched/untouched, and ng-dirty/pristine)

From the form we created earlier, let’s define #stockName as the ngModel of the input field and add the validation stockName.pristine.

custom form validation

Save it and go back to your browser to check.

custom form validation

Success. As you can see, both variables are shown. These variables are what we are going to use with our custom variable message.

Back to your IDE, let’s create another <div> where we will create the custom message.

custom form validation

Save your work and go back to your browser to check.

custom form validation

  • As you can see, once the value was removed the alert message was shown.

Doing further custom form validation, we will remove the ‘CSS Class’ field as we have no use for it anymore. Then, copy the alert message into the stock code. Next, we’re going to insert a novalidate command on our form because we’re going to insert a custom form validation to our Submit button.

custom form validation

Save your work and go back to your browser.

custom form validation

As you can see, Submit button is disabled because the input fields are not properly filled.

custom form validation

In the screenshot below, it is still disabled because Stock Code is not yet filled.

custom form validation

Finally, all the fields now meet the validation so our Submit button is enabled. And that is how custom form validation is done.

On the last part of this Forms series, we will talk about Angular CSS Classes.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.