Question

如何在以下angularjs CODE中应用验证我试图应用以下验证但它不能正常工作请告诉我应用验证的代码中的错误

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

或告诉我如何调试错误？

Answer 1

你不给控件命名。并使用 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>

Answer 2

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>

如何对以下angularJs代码应用验证

2 个答案: