kratos2333
2/15/2017 - 11:21 AM

Inject ngMessages for the form validation

Inject ngMessages for the form validation

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">

<head>
    <title>Learn and Understand AngularJS</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8">
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <style>
        html,
        body,
        input,
        select,
        textarea {
            font-size: 1.05em;
        }
    </style>
    <!-- load angular via CDN -->
    <script src="http://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.3.0-rc.1/angular-messages.min.js"></script>
    <script src="app.js"></script>
</head>

<body>
    <header>
        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header"> <a class="navbar-brand" href="/">AngularJS</a> </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <div class="container">
        <div ng-controller="mainController">
            <form name="myForm">
                <label> Enter text:
                    <input type="email" ng-model="field" name="myField" required maxlength="15" /> </label>
                <div ng-messages="myForm.myField.$error" role="alert">
                    <div ng-message="required">Please enter a value for this field.</div>
                    <div ng-message="email">This field must be a valid email address.</div>
                    <div ng-message="maxlength">This field can be at most 15 characters long.</div>
                </div>
            </form>
        </div>
    </div>
</body>

</html>
app.js
content_copyfile_download
var myApp = angular.module('myApp', ['ngMessages']);

myApp.controller('mainController', function($scope) {
    
});