Home > Developer > JavaScript
Detailed explanation of Form Verification programming in AngularJS, and angularjs forms
Requirement
Now we know our goal. Let's build this together.
Angular form attributes $ valid, $ invalid, $ pristine, $ dirty
Angular provides form attributes to help us verify the form. They provide us with a variety of information about a form and its input, and apply the form and input.
Attribute Class
Description
Angular also provides a class for the form and its input box, so that you can set its style based on each status.
Access Form attributes
Set our form
We will use a simple form for demonstration.
We will need two files:
Our Form Code index.html
<!-- index.html --><!DOCTYPE html>Some key points are listed here:
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.
<input ng-model="{ string }" name="{ string }" required ng-required="{ boolean }" ng-minlength="{ number }" ng-maxlength="{ number }" ng-pattern="{ string }" ng-change="{ string }"></input>
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.
<!-- index.html -->... <!-- SUBMIT BUTTON --> <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button> ...
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 ).
<!-- index.html -->... <!-- NAME --> <div class="form-group"> <label>Name</label> <input type="text" name="name" class="form-control" ng-model="name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p> </div> <!-- USERNAME --> <div class="form-group"> <label>Username</label> <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p> </div> <!-- EMAIL --> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="email"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p> </div> ...
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 = "{<class-you-want >:< expression to be evaluated> }". for more information, read the Angular ngClass document.
<!-- index.html -->... <!-- NAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }"> <label>Name</label> <input type="text" name="name" class="form-control" ng-model="user.name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p> </div> <!-- USERNAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"> <label>Username</label> <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p> <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p> </div> <!-- EMAIL --> <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"> <label>Email</label> <input type="email" name="email" class="form-control" ng-model="user.email"> <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p> </div> ...
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.
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:
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:
As you can see, we use Angular's built-in form verification technology to create a client verification form.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
