Abdul Rehman Sayed Abdul Rehman Sayed - 1 year ago 56
AngularJS Question

why are validation directives/properties not set on field?

See this plunkr :


I have written minlength, maxlength & validation attributes on the mname field but their $valid,$dirty & $pristine properties are somehow not being set. & thus I am unable to show error messages.

I can verify that form is invalid by passing the form to the controller & adding an alert there.


<!doctype html>
<html ng-app="emi" >
<meta charset="utf-8">
<title>Empty AngularJS</title>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.18/angular-messages.js"></script>
<script src="script.js"></script>

<section data-ng-controller="emiController">

<form name="MyEmiForm" novalidate data-ng-submit="create(MyEmiForm)" >

<label for="name">Name</label>
<input type="text" data-ng-model="name" id="mname"
placeholder="Name" required ng-minlength="3" ng-maxlength="8"/>

Form Valid : {{MyEmiForm.$valid }} <br>
{{MyEmiForm.mname.$error }}<br>
mname Valid : {{MyEmiForm.mname.$valid }}<br>
mname Dirty : {{MyEmiForm.mname.$dirty }}<br>
mname Pristine : {{MyEmiForm.mname.$pristine}}<br>
mname Touched : {{MyEmiForm.mname.$touched }}<br>
DOB Valid : {{MyEmiForm.dob.$valid }}<br>

<span class="help-block"
ng-show="MyEmiForm.mname.$invalid && !MyEmiForm.mname.$pristine">
You name is required.

<div ng-messages="MyEmiForm.mname.$error" >
<div ng-message="required">This field is required</div>

<label for="dob">DOB</label>
<input type="text" data-ng-model="dob" id="dob" placeholder="DOB" required/>

<input type="submit" >
<div data-ng-show="error">
<strong data-ng-bind="error"></strong>

Script File

angular.module('emi', ['ngMessages']) //[] re-initialize, w/o []. use exiting
['$scope' ,

$scope.title = "New Emi Calculation";

$scope.create = function(form) {
alert("Not ok");
alert("All ok");


Answer Source

add name attribute to input

<input type="text"  name='mname' data-ng-model="name" id="mname"  
            placeholder="Name" required ng-minlength="3" ng-maxlength="8"/>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download