validation with mvc and angular (#1378)
* validation with mvc and angular * fix dependency versions
This commit is contained in:
lor6
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="ISO-8859-1">
|
||||
<title>Users</title>
|
||||
<script
|
||||
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
|
||||
|
||||
<script src="js/app.js"></script>
|
||||
<link rel="stylesheet" href="css/user.css">
|
||||
</head>
|
||||
<body ng-app="app" ng-controller="UserCtrl">
|
||||
|
||||
<form name="userForm" method="POST" novalidate ng-class="{'form-error':submitted}" ng-submit="saveUser()" >
|
||||
|
||||
<label class="form-label">Email:</label>
|
||||
<input type="email" name="email" required ng-model="user.email" class="form-input"/>
|
||||
<div ng-messages="userForm.email.$error" ng-show="submitted && userForm.email.$invalid" class="error-messages">
|
||||
<p ng-message="email">Invalid email!</p>
|
||||
<p ng-message="required">Email is required!</p>
|
||||
</div>
|
||||
<div class="check" ng-show="submitted && userForm.email.$valid">✓</div>
|
||||
|
||||
<label class="form-label">Password:</label>
|
||||
<input type="password" name="password" required ng-model="user.password" ng-minlength="4" ng-maxlength="15" class="form-input"/>
|
||||
<div ng-messages="userForm.password.$error" ng-show="submitted && userForm.password.$invalid" class="error-messages">
|
||||
<p ng-message="minlength">Password must be at least 4 characters!</p>
|
||||
<p ng-message="maxlength">Password must not be longer than 15 characters!</p>
|
||||
<p ng-message="required">Password is required!</p>
|
||||
</div>
|
||||
<div class="check" ng-show="submitted && userForm.password.$valid">✓</div>
|
||||
|
||||
<label class="form-label">Name:</label>
|
||||
<input type="text" name="name" ng-model="user.name" ng-trim="true" required class="form-input" />
|
||||
<div ng-messages="userForm.name.$error" ng-show="submitted && userForm.name.$invalid" class="error-messages">
|
||||
<p ng-message="required">Name is required!</p>
|
||||
</div>
|
||||
<div class="check" ng-show="submitted && userForm.name.$valid">✓</div>
|
||||
|
||||
<label class="form-label">Age:</label>
|
||||
<input type="number" name="age" ng-model="user.age" ng-min="18" class="form-input" required/>
|
||||
<div ng-messages="userForm.age.$error" ng-show="submitted && userForm.age.$invalid" class="error-messages">
|
||||
<p ng-message="min">Age must be greater than 18!</p>
|
||||
<p ng-message="required">Age must be greater than 18!</p>
|
||||
</div>
|
||||
<div class="check" ng-show="submitted && userForm.age.$valid">✓</div>
|
||||
<br />
|
||||
<button type="submit" class="form-button-save" >Save</button>
|
||||
<button type="reset" ng-click="resetForm()" class="form-button-reset">Reset</button>
|
||||
</form>
|
||||
|
||||
<br />
|
||||
<div style="color:red;font-weight:bold">{{errorMessage}}</div>
|
||||
<div style="color:green;font-weight:bold">{{message}}</div>
|
||||
<br />
|
||||
|
||||
All Users: <br />
|
||||
<table id="users">
|
||||
<tr>
|
||||
<th>Email</th><th>Name</th><th>Age</th>
|
||||
</tr>
|
||||
<tr ng-repeat="usr in users">
|
||||
<td>{{usr.email}}</td> <td>{{usr.name}}</td> <td>{{usr.age}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,77 @@
|
||||
.form-label {
|
||||
display:block;
|
||||
margin-top:16px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
border-radius:5px;
|
||||
display:inline;
|
||||
}
|
||||
|
||||
.form-input p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.form-button {
|
||||
margin:5px;
|
||||
}
|
||||
|
||||
.form-error input.ng-invalid {
|
||||
border-color:red;
|
||||
}
|
||||
|
||||
.check {
|
||||
display:inline;
|
||||
color:green;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.error-messages {
|
||||
color:red;
|
||||
}
|
||||
|
||||
.error-messages p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
#customers {
|
||||
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#users td, #users th {
|
||||
border: 1px solid dodgerblue;
|
||||
border-collapse:collapse;
|
||||
padding: 4px;
|
||||
width:200px;
|
||||
}
|
||||
|
||||
#users tr:nth-child(even){background-color: lavender;}
|
||||
|
||||
#users th {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
text-align: left;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
|
||||
#users {
|
||||
border-collapse:collapse;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius:5px;
|
||||
cursor:pointer;
|
||||
margin:10px;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
.form-button-save {
|
||||
background-color:lightgreen;
|
||||
}
|
||||
|
||||
.form-button-reset {
|
||||
background-color:lightpink;
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
var app = angular.module('app', ['ngMessages']);
|
||||
|
||||
app.controller('UserCtrl', ['$scope','UserService', function ($scope,UserService) {
|
||||
|
||||
$scope.submitted = false;
|
||||
|
||||
$scope.getUsers = function() {
|
||||
UserService.getUsers().then( function(data){
|
||||
$scope.users = data;
|
||||
});
|
||||
}
|
||||
|
||||
$scope.saveUser = function () {
|
||||
$scope.submitted = true;
|
||||
if ($scope.userForm.$valid){
|
||||
UserService.saveUser($scope.user)
|
||||
.then (function success(response){
|
||||
$scope.message = 'User added!';
|
||||
$scope.errorMessage = '';
|
||||
$scope.getUsers();
|
||||
$scope.user = null;
|
||||
$scope.submitted = false;
|
||||
},
|
||||
function error(response){
|
||||
if (response.status == 409){
|
||||
$scope.errorMessage = response.data[0];
|
||||
}
|
||||
else {
|
||||
$scope.errorMessage = 'Error adding user!';
|
||||
}
|
||||
$scope.message = '';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$scope.getUsers();
|
||||
|
||||
$scope.resetForm = function () {
|
||||
$scope.userForm.$setPristine();
|
||||
$scope.user=null;
|
||||
$scope.message='';
|
||||
$scope.errorMessage='';
|
||||
$scope.submitted = false;
|
||||
}
|
||||
|
||||
}]);
|
||||
|
||||
app.service('UserService',['$http', function ($http) {
|
||||
|
||||
this.saveUser = function saveUser(user){
|
||||
return $http({
|
||||
method: 'POST',
|
||||
url: 'user',
|
||||
params: {email:user.email, password:user.password, name:user.name, age:user.age},
|
||||
headers: 'Accept:application/json'
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
this.getUsers = function getUsers(){
|
||||
return $http({
|
||||
method: 'GET',
|
||||
url: 'users',
|
||||
headers:'Accept:application/json'
|
||||
}).then( function(response){
|
||||
return response.data;
|
||||
} );
|
||||
}
|
||||
|
||||
}]);
|
||||
Reference in New Issue
Block a user