Implementing custom Form Validation in Angularjs

In addition to some well-defined validations (such as required, minimum length, maximum length), more commonly, we need to define form validation ourselves in order to give you the right solution for many of the unconventional issues encountered in your project.

1. Controlling variables in forms

   The properties of the form can be accessed in the $scope object to which they belong, and we can access the $scope object, so JavaScript can indirectly access form properties in the DOM. With these properties, we can respond to the form in real time. You can access these properties using the following format:

   FormName.inputFileldName.property

   Non-modified form formname.inputfieldname. $pristine

   Modified form Formname.inputfiledname. $dirty

   Legal form Formname.inputfieldname. $valid

   Illegal form formname.inputfieldname. $invalid

   Error formname.inputfieldname. $error???? If the validation fails, the value is true if the validation passes, the value is False

   Some useful CSS styles

   Angularjs when processing a form, some CSS classes are added based on the current state of the form, and these CSS class names compare similar to the corresponding properties:

   . ng-pristine{}

   . ng-dirty{}

   . ng-valid{}

   . ng-invalid{}

   They correspond to the specific state of the form input field, which is added to the field when a field entry is illegal.

2, although the real-time verification is sometimes very necessary, but if the user has not finished the input in the reminder error, is a very bad user experience, the solution has two, first, when the form is submitted to verify, and second, when input loses focus to verify.

Implementing custom Form Validation in Angularjs