Let's take an example to implement a form with the below requirements.
- Name is required
- Username is not required, minimum length 3, maximum length 8
- Email is not required, but has to be a valid email
- Form submit is disabled if the form isn’t valid
- Show a required or invalid email error
- Alert awesome if submitted correctly
Angular Form Properties $valid, $invalid, $pristine, $dirty
Angular provides properties on forms that help us validate them.
They give us various information about a form or its inputs and are applied to a form and inputs.
Property
|
Class
|
Description
|
$valid
|
ng-valid
|
Boolean Tells
whether an item is currently valid based on the rules you placed.
|
$invalid
|
ng-invalid
|
Boolean Tells
whether an item is currently invalid based on the rules you placed.
|
$pristine
|
ng-pristine
|
Boolean True
if the form/input has not been used yet.
|
$dirty
|
ng-dirty
|
Boolean True
if the form/input has been used.
|
$touched
|
ng-touched
|
Boolean True
if the input has been blurred.
|
Angular also provides classes on the form and its inputs so that
you can style each state accordingly.
Accessing Angular Form Properties
- To
access the form:
<form name>.<angular property> - To access an input:
<form name>.<input name>.<angular property>
Setting Up Our Form
We will use a simple form to demonstrate.
We
will need 2 files: * index.html Our code to display the form * app.js Our Angular application and controller (barely
any code at all)
Our Form Code index.html
<!--
index.html -->
<!DOCTYPE
html>
<html>
<head>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body
{ padding-top:30px; }
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script
src="formvalidation.js"></script>
</head>
<!--
apply angular app and controller to our body -->
<body
ng-app="validationApp" ng-controller="mainController">
<div
class="container">
<div
class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div
class="page-header"><h1>AngularJS Form
Validation</h1></div>
<!-- FORM -->
<!-- pass in the variable if our form is
valid or invalid -->
<form name="userForm"
ng-submit="submitForm(userForm.$valid)" novalidate> <!--
novalidate prevents HTML5 validation since we will be validating ourselves
-->
<!-- NAME -->
<div
class="form-group">
<label>Name</label>
<input type="text"
name="name" class="form-control" ng-model="name"
required>
</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">
</div>
<!-- EMAIL -->
<div
class="form-group">
<label>Email</label>
<input type="email"
name="email" class="form-control"
ng-model="email">
</div>
<!-- SUBMIT BUTTON -->
<button type="submit"
class="btn btn-primary">Submit</button>
</form>
</div><!--
col-sm-8 -->
</div><!--
/container -->
</body>
</html>
A few
key points to note here:
- novalidate: This will
prevent the default HTML5 validations since we’ll be doing that ourselves
(ours will be much prettier)
- We
have applied ng-model to our
inputs so that we have data from our forms bound to Angular variables
- ng-minlength and ng-maxlength on
username will create those rules
- The name input is required
- The email input is type=”email”
VALIDATION
RULES
Angular provides many validation rules that we can use in
addition to
ng-minlength and ng-maxlength.ngMessages
ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on. The directive itself compliments error message reporting with the ngModel $error object (which stores a key/value state of validation errors).ngMessages manages the state of internal messages within its container element. The internal messages use the ngMessage directive and will be inserted/removed from the page depending on if they're present within the key/value object. By default, only one message will be displayed at a time and this depends on the prioritization of the messages within the template. (This can be changed by using the ng-messages-multiple on the directive container.)
A remote template can also be used to promote message reuseability and messages can also be overridden.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngMessages-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular-messages.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngMessagesExample">
<form name="myForm">
<label>Enter your name:</label>
<input type="text"
name="myName"
ng-model="name"
ng-minlength="5"
ng-maxlength="20"
required />
<pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
<div ng-messages="myForm.myName.$error" style="color:maroon">
<div ng-message="required">You did not enter a field</div>
<div ng-message="minlength">Your field is too short</div>
<div ng-message="maxlength">Your field is too long</div>
</div>
</form>
</body>
</html>
https://scotch.io/tutorials/angularjs-form-validation
https://scotch.io/tutorials/angularjs-form-validation-with-ngmessages
No comments:
Post a Comment