爲什麼驗證指令/屬性未在字段上設置？

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

一個愚蠢的錯誤.. –

爲什麼驗證指令/屬性未在字段上設置？

回答

相關問題