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

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

javascript angularjs

Javascript 如何对以下angularJs代码应用验证,javascript,angularjs,Javascript,Angularjs,如何在下面的angularjs代码中应用验证我已尝试应用以下验证但它不能正常工作因此，请告诉我应用验证的代码中的错误 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="ISO-8859-1"> <title>Index</title> <script type="text/javascript" src="angular.js">

如何在下面的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>


指数
var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope，$http）{
刷新数据（）；
函数refreshData（）{
$http({
方法：“GET”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries.json'
}).成功（功能（数据）
{
$scope.posts=数据；
});
}
$scope.form={
国家名称：“pp”，
人口：“1000”
};
$scope.add=函数（）{
$http({
方法：“POST”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries/create/“+$scope.form.countryName+”/“+$scope.form.population”
}).成功（功能（数据）{
刷新数据（）；
});
}
$scope.remove=函数（数据）{
$http({
方法：“删除”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries/delete/“+数据
}).成功（功能（数据）{
警报（“国家/地区已删除”）；
刷新数据（）；
});
}
});
国家名单
国家Id
国名
农村人口
行动
{{c.countryId}
{{c.countryName}
{{c.人口}}
去除
添加国家/地区
国家名称：
国家名称是必需的
国家人口：
国家名称是必需的
添加

或者告诉我如何调试错误？

您没有给控件命名。还可以使用formName.ControlName显示错误。您使用的formName.ModelName无效。看到我的代码了吗


指数
var-app=angular.module（“myApp”，[]）；
app.controller（“myCtrl”，函数（$scope，$http）{
刷新数据（）；
函数refreshData（）{
$http({
方法：“GET”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries.json'
}).成功（功能（数据）
{
$scope.posts=数据；
});
}
$scope.form={
国家名称：“pp”，
人口：“1000”
};
$scope.add=函数（）{
$http({
方法：“POST”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries/create/“+$scope.form.countryName+”/“+$scope.form.population”
}).成功（功能（数据）{
刷新数据（）；
});
}
$scope.remove=函数（数据）{
$http({
方法：“删除”，
网址：'http://localhost:8081/SpringWithAngularJs/rest/countries/delete/“+数据
}).成功（功能（数据）{
警报（“国家/地区已删除”）；
刷新数据（）；
});
}
});
国家名单
国家Id
国名
农村人口
行动
{{c.countryId}
{{c.countryName}
{{c.人口}}
去除
添加国家/地区
国家名称：
国家名称是必需的
国家人口：
国家名称是必需的
添加

Html中有更改-

您错过了填充所需的标记。此外，在角度验证方面，我们正在与

输入名称标签


国家名称是必需的

按钮-

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

添加

使用console.log（$value）；要获取要调试的值，您必须知道$scope函数内的get值。

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