Azimuth form: Some key points are listed here:
- Novalidate: it will organize the default HTML5 verification, because it will be done by ourselves (our own will be better)
- We applied ng-model in the input box to bind data from the form to the angular variable.
- Ng-minlength and ng-maxlength on username will create their own rules
- The name field is required.
- The email input box has the attribute type = "email"
Verification rules
Angular has many verification rules, such as tong-min leng than dng-max length.
Angular can also configure its own rules. Angular input instructions are provided.
Now the form is created, and Angular application and controller are created, ng-app ng-controller.
Codeapp. js of the application
// app.js// create angular appvar validationApp = angular.module('validationApp', []); // create angular controllervalidationApp.controller('mainController', function($scope) { // function to submit the form after all validation has occurred $scope.submitForm = function(isValid) { // check to make sure the form is completely valid if (isValid) { alert('our form is amazing'); } }; });
Make the HTML5 Validator's novalidate
We will use novalidate in our form. This is a good practice because we will handle the verification on our own. If we let our form do this, it looks ugly.
Disable the submit button ng-disabled
Now we have a really good show. We started to use Angular attributes. First, disable the submit button. If our form is $ invalid, we only want to disable it.
...
Submit ...
Use only a little code (ng-disabled). if our form is $ invalid, the form button will be disabled.
This means that our name input field is required, and the email input field requires a valid email.
Use eng-show to display error messages
Ng-valid and ng-invalid will automatically verify the input validity based on the provided form rules.
Add some error information in the input part as long as it is not equal to $ valid or it has been used (it cannot be displayed yet ).
...
Name
You name is required.
Username
Username is too short.
Username is too long.
Email
Enter a valid email.
...
In this way, Angular verifies the $ invalid and $ pristine properties attributes of the input part based on the rules to determine whether to display the error message.
Pattern
Angular has provided some classes for verifying whether the input or form is valid, such as (ng-valid, ng-invalid, ng-pristineandng-dirty ).
You can edit your favorite CSS. you can customize these classes to implement specific scenario applications.
.ng-valid { }.ng-invalid { }.ng-pristine { }.ng-dirty { } /* really specific css rules applied by angular */.ng-invalid-required { }.ng-invalid-minlength { }.ng-valid-max-length { }
Use ng-class to add classes based on conditions
Because Bootstrap is used, we will use the classes provided by them (has-error), so that we can get beautiful error messages and colors around our form-group.
Ng-class allows us to add classes based on an expression. in this case, we want to add an has-error class to our form-group, if the input box is in the status of $ invalid or not pristine.
The working method is ng-class = "{ : } ". For more information, please read the Angular ngClass document.
...
Name
You name is required.
Username
Username is too short.
Username is too long.
Email
Enter a valid email.
...
Now our form has the appropriate Bootstrap error class.
The error message is displayed only after the form is submitted.
Sometimes you do not want to display an error message when the user is entering it. the current error message is displayed immediately when the user enters the form. this can happen because Angular has a great data binding feature. because all transactions can be changed in an instant, this will have side effects in form verification.
For scenarios where you want to display error messages only after the form is submitted, you need to make some minor adjustments to the above code.
- Remove ng-disabled from the submit button, because we want users to click submit even if the form is not fully verified.
- You need to add a variable after the form has been submitted. in your submitForm () function, you only need to add $ scope. submitted = true ;. once the form is submitted, it will save the submitted variable whose submission value is true.
- Set the error rule from ng-class = "{'has-error': userForm. name. $ invalid &&! UserForm. name. $ pristine} "adjusted to ng-class =" {'has-error': userForm. name. $ invalid &&! UserForm. name. $ pristine & submitted }". this ensures that the error message is only displayed when the form is submitted. you may need to adjust all other ng-class and ng-show for this variable.
The error message is displayed only when the submitted variable is set to true.
The error message is displayed only when you click outside the input box.
The error message (also called lost focus blur) is displayed only when you click outside the input box. this requirement is more complex than verification during submission. when the focus is lost, a custom command is required to verify the form. this is an instruction that allows you to operate the DOM.
We are writing an article dedicated to this topic. At the same time, there are other resources to discuss the situation of creating a M command to deal with the loss of focus:
- Http://coding-issues.blogspot.in/2013/10/angularjs-blur-directive.html
- Http://blog.ejci.net/2013/08/06/dealing-with-focus-and-blur-in-angularjs-directives/
- Http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw? P = preview
Complete
Now, once we have entered all the information correctly, our form submission button can be used. once we have submitted the form, we will see the pop-up message we set.
With a few lines, we can:
- Input box verification
- Display form error messages
- Custom style
- Automatic form disabling and enabling
- Custom rules
As you can see, we use Angular's built-in form verification technology to create a client verification form.