Как применять валидации на следующие angularJs код

Как применять валидации в следующем angularjs КОДА Я попытался применить следующие валидаций , но он не работает должным образом Так скажите мне ошибку в коде, чтобы применить валидацииКак применять валидации на следующие angularJs код

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Index</title> 
<script type="text/javascript" src="angular.js"></script> 
    <script type="text/javascript"> 
    var app = angular.module("myApp", []); 
    app.controller("myCtrl", function($scope , $http) { 
     refreshData(); 

     function refreshData(){ 
      $http({ 
       method: 'GET', 
       url:'http://localhost:8081/SpringWithAngularJs/rest/countries.json' 
        }).success(function(data) 
         { 

         $scope.posts = data; 

         }); 
     } 
     $scope.form = { 
       countryName : "pp", 
       population : "1000" 
        }; 
     $scope.add=function(){ 
      $http({ 
       method: 'POST', 
       url:'http://localhost:8081/SpringWithAngularJs/rest/countries/create/'+$scope.form.countryName+'/'+$scope.form.population 
       }).success(function(data){ 
        refreshData(); 
        }); 
      } 
     $scope.remove=function(data){ 
      $http({ 
       method: 'DELETE', 
       url:'http://localhost:8081/SpringWithAngularJs/rest/countries/delete/'+data 
       }).success(function(data){ 
        alert('Country Deleted'); 
        refreshData(); 
        }); 
     } 
    }); 
    </script> 
    </head> 
<body ng-controller="myCtrl"> 
<form name="myForm" novalidate> 
<h1>Country List</h1> 
    <table border=""> 
     <thead> 
      <tr> 
       <th>Country Id</th> 
       <th>Country Name</th> 
       <th>Country Population</th> 
       <th>Action</th> 
      </tr> 
     </thead> 

     <tr ng-repeat="c in posts"> 
      <td>{{c.countryId}}</td> 
      <td>{{c.countryName}}</td> 
      <td>{{c.population}}</td> 
      <td><button ng-click="remove($index)">Remove</button></td> 
     </tr> 
    </table> 

    <h1>Add Country</h1> 
    <table> 
     <tr> 
      <td>Country Name:</td> 
      <td><input type="text" ng-model="form.countryName" required/></td> 
      <td><span style="color: red" ng-show= "myForm.form.countryName.$dirty && myForm.form.countryName.$invalid"> 
      <span ng-show="myForm.form.countryName.$error.required">Country Name is required</span></span></td> 
     </tr> 

     <tr> 
      <td>Country Population:</td> 
      <td><input type="text" ng-model="form.population"/></td> 
      <td><span style="color: red" ng-show= "myForm.form.population.$dirty && myForm.form.population.$invalid"> 
      <span ng-show="myForm.form.population.$error.required">Country Name is required</span></span></td> 
     </tr> 

     <tr> 
      <td><button type="submit" ng-disabled="myForm.form.countryName.$dirty && myForm.form.countryName.$invalid || myForm.form.population.$dirty && myForm.form.population.$invalid" ng-click="add()">Add</button></td> 
     </tr> 

    </table> 
    </form> 
</body> 
</html>

или скажите, как отладить ошибку?

источник

2017-01-25 Girjesh

использование console.log ($ значения); чтобы получить значение для отладки, вы должны знать, что значение входит в функцию $ scope. – Thailand

Есть изменения в Html -

Вы пропустили необходимый тег для населения. Кроме того, в угловых проверках работают с

ввода имя тег

<td><input type="text" name="countryName" ng-model="form.countryName" required/></td> 
      <td><span style="color: red" ng-show= "myForm.countryName.$dirty && myForm.countryName.$invalid"> 

    Country Name is required</span></td>

Для кнопки -

<td><button type="submit" ng-disabled="myForm.$invalid" ng-click="add()">Add</button></td>

источник

2017-01-25 06:02:44 Sunil

рабочая скрипка - http://jsfiddle.net/ADukg/9426/ – Sunil

Вы не дадите имя контролю. а также используйте formName.ControlName, чтобы показать ошибку. Вы неверно использовали formName.ModelName. Смотрите мой код

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
<meta charset="ISO-8859-1"> 
 
<title>Index</title> 
 
<script type="text/javascript" src="angular.js"></script> 
 
    <script type="text/javascript"> 
 
    var app = angular.module("myApp", []); 
 
    app.controller("myCtrl", function($scope , $http) { 
 
     refreshData(); 
 

 
     function refreshData(){ 
 
      $http({ 
 
       method: 'GET', 
 
       url:'http://localhost:8081/SpringWithAngularJs/rest/countries.json' 
 
        }).success(function(data) 
 
         { 
 

 
         $scope.posts = data; 
 

 
         }); 
 
     } 
 
     $scope.form = { 
 
       countryName : "pp", 
 
       population : "1000" 
 
        }; 
 
     $scope.add=function(){ 
 
      $http({ 
 
       method: 'POST', 
 
       url:'http://localhost:8081/SpringWithAngularJs/rest/countries/create/'+$scope.form.countryName+'/'+$scope.form.population 
 
       }).success(function(data){ 
 
        refreshData(); 
 
        }); 
 
      } 
 
     $scope.remove=function(data){ 
 
      $http({ 
 
       method: 'DELETE', 
 
       url:'http://localhost:8081/SpringWithAngularJs/rest/countries/delete/'+data 
 
       }).success(function(data){ 
 
        alert('Country Deleted'); 
 
        refreshData(); 
 
        }); 
 
     } 
 
    }); 
 
    </script> 
 
    </head> 
 
<body ng-controller="myCtrl"> 
 
<form name="myForm" novalidate> 
 
<h1>Country List</h1> 
 
    <table border=""> 
 
     <thead> 
 
      <tr> 
 
       <th>Country Id</th> 
 
       <th>Country Name</th> 
 
       <th>Country Population</th> 
 
       <th>Action</th> 
 
      </tr> 
 
     </thead> 
 

 
     <tr ng-repeat="c in posts"> 
 
      <td>{{c.countryId}}</td> 
 
      <td>{{c.countryName}}</td> 
 
      <td>{{c.population}}</td> 
 
      <td><button ng-click="remove($index)">Remove</button></td> 
 
     </tr> 
 
    </table> 
 

 
    <h1>Add Country</h1> 
 
    <table> 
 
     <tr> 
 
      <td>Country Name:</td> 
 
      <td><input type="text" ng-model="form.countryName" name="countryName" required/></td> 
 
      <td><span style="color: red" ng-show= "myForm.countryName.$dirty && myForm.countryName.$invalid"> 
 
      <span ng-show="myForm.countryName.$error.required">Country Name is required</span></span></td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>Country Population:</td> 
 
      <td><input type="text" ng-model="form.population" name="population"/></td> 
 
      <td><span style="color: red" ng-show= "myForm.population.$dirty && myForm.population.$invalid"> 
 
      <span ng-show="myForm.population.$error.required">Country Name is required</span></span></td> 
 
     </tr> 
 

 
     <tr> 
 
      <td><button type="submit" ng-disabled="myForm.form.countryName.$dirty && myForm.form.countryName.$invalid || myForm.form.population.$dirty && myForm.form.population.$invalid" ng-click="add()">Add</button></td> 
 
     </tr> 
 

 
    </table> 
 
    </form> 
 
</body> 
 
</html>

источник

2017-01-25 06:02:41 Jenny

Как применять валидации на следующие angularJs код

ответ

Смежные вопросы