为什么验证指令/属性未在字段上设置？

https://plnkr.co/edit/vQvgVSAfMLh3kPRKDFP2?p=preview

我已经写MINLENGTH个，最大长度&验证属性的MNAME字段，但他们的$有效，$脏& $质朴的特性在某种程度上未被设置。 &因此我无法显示错误消息。

我可以通过将表单传递给控制器&在那里添加警报来验证该表单是无效的。

HTML代码

<!doctype html> 
<html ng-app="emi" > 
<head> 
    <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> 
</head> 
<body> 

    <section data-ng-controller="emiController"> 
    <h1>{{title}}</h1> 

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

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


      <br> 
      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. 
     </span> 


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

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

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

脚本文件

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

    $scope.title = "New Emi Calculation"; 

     $scope.create = function(form) { 
     if(!form.$valid) 
     { 
      alert("Not ok"); 
      return; 
     } 
     alert("All ok"); 
     } 


    } 
]);

来源

2016-06-11 Abdul Rehman Sayed

名称属性添加到输入

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

来源

2016-06-11 06:46:37 aseferov

一个愚蠢的错误.. –

为什么验证指令/属性未在字段上设置？

回答

相关问题