✔ AngularJS Form Validation
> AngularJS는 입력값을 검증할수 있습니다
1. Form Validation
> AngularJS는 클라이언트 측에서 유효성 검증을 한다
> AngularJS는 form과 input fields의 상태를 모니터링하고, 유저의 현재 상태가 어떤지 알려준다
> AngularJS는 유저가 선택했는지 수정했는지에 대한 정보를 가지고 있다
> 표준 HTML5 속성을 input값을 검증하기 위해 써도 되고, 직접 함수를 만들어서 검증을 해도 된다
> 클라이언트 측에서만 검증을 하는 것은 보안이 안되어있기 때문에 서버측에서도 유효성 검증이 필요하다
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
2. E-mail
<form name="myForm">
<input name="myInput" ng-model="myInput" type="email">
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
3. Form State and Input State
> AngularJS는 지속적으로 form과 input fields의 값을 업데이트한다
> Input field
: $untouched, $touched, $pristine, $dirty, $invalid, $valid
> Forms
: $pristine, $dirty, $invalid, $valid, $submitted
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required</span>
4. CSS Classes
> AngularJS는 form이나 input field의 상태값에 따라서 CSS classes를 추가한다
> Input field
: ng-untouched, ng-touched, ng-pristine, ng-dirty, ng-valid, ng-invalid, ng-valid-key(ex: ng-valid-required), ng-invalid-key(ex: ng-invalid-required)
> forms
: ng-pristine, ng-dirty, ng-valid, ng-invalid, ng-valid-key(ex: ng-valid-required), ng-invalid-key(ex: ng-invalid-required)
> 값이 false인 경우 클래스는 사라진다
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style><style>
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
</style>
5. Custom Validation
> 자신만의 validation 함수를 만드는건 좀 어렵다. 어플리케이션에 새로운 directive를 추가해야하고 특정 인수에 대해서 함수를 만들어서 다뤄야한다
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if(value.indexOf("e") > -1){
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
</script>
6. Validation Example
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
</script>
</body>
</html>
** 위 글은 w3schools.com에 있는 내용을 한국어로 번역하여 적어둔 글입니다.
- https://www.w3schools.com/angular/angular_validation.asp
Angular Validation
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'IT' 카테고리의 다른 글
| ServiceNow Fundamentals (0) | 2022.02.22 |
|---|---|
| AngularJS #20 - API (0) | 2022.01.11 |
| AngularJS #18 - Forms (0) | 2022.01.08 |
| AngularJS #17 - Events (0) | 2022.01.03 |
| AngularJS #16 - HTML DOM (0) | 2022.01.02 |