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.
Save it and go back to your browser to check.
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.
Save your work and go back to your browser to check.
- 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.
Save your work and go back to your browser.
As you can see, Submit button is disabled because the input fields are not properly filled.
In the screenshot below, it is still disabled because Stock Code is not yet filled.
Finally, all the fields now meet the validation so our Submit button is enabled. And that is how custom form validation is done.