2/15/2017 - 11:21 AM

Inject ngMessages for the form validation

Inject ngMessages for the form validation

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

    <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="" />
        textarea {
            font-size: 1.05em;
    <!-- load angular via CDN -->
    <script src=""></script>
    <script src=""></script>
    <script src="app.js"></script>

        <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>
    <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>

var myApp = angular.module('myApp', ['ngMessages']);

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