What is the correct way to implement validations in AngularJS as shown in the CODE snippet below? I have attempted to apply the validations mentioned in the code but they seem to be malfunctioning. Please help me identify the error in the code related to validations.
<!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>
Alternatively, how can I effectively troubleshoot and debug any errors in the code?