Angular에서 $setValidity 함수 사용
각 $setvalidity()는 주어진 양식 필드의 유효성을 설정하는 함수입니다. 이 함수는 생성자와 다른 컨트롤러 메서드 모두에서 사용할 수 있습니다.
이 기사는 컨트롤러 내에서 $setValidity를 사용하는 방법을 보여줍니다. 또한 클라이언트 측에 제출하기 전에 서버 측에서 입력의 유효성을 설정하는 방법을 보여줍니다.
Angular의 $setValidity
Angular는 입력의 유효성을 설정할 수 있는 $setValidity라는 지시문을 제공합니다. 뷰 내부가 아니라 컨트롤러 내부에서 사용됩니다.
$setValidity 함수는 양식 요소의 유효성을 확인하는 데 사용할 수 있는 키/값 쌍을 할당합니다.
키는 고유하고 값은 이 컨텍스트에서 true 또는 false입니다. 특정 값은 $setValidity 메소드가 호출될 때 $error 객체에 추가되며, 이는 값이 허용 가능한지 여부를 확인하는 데 사용할 수 있습니다.
$setValidity 함수는 다음과 같은 방법으로 사용할 수 있습니다.
-
전체 양식의 유효성 설정:
$scope.$setValidity($scope.myForm, 'myFormIsValid'); -
필드의 유효성 설정:
$scope.$setValidity($scope.myForm, 'fieldName', true);
$setValidity 지시문은 양식 필드의 유효성에 영향을 미치지 않습니다. 그것은 단지 양식 필드와 해당 유효성 검사기의 유효성을 설정합니다.
Angular의 컨트롤러 내부에서 $setValidity를 사용하는 단계
이 튜토리얼은 Angular의 컨트롤러 내부에서 $setValidity를 사용하는 방법을 보여줍니다.
-
HomeController라는 이름의 컨트롤러를 만듭니다. -
$setValidity및FormsModule모듈을 가져옵니다. -
$setValidity()라는 함수를 만듭니다. 이 함수 내에서$setValidity값을true또는false로 할당합니다. -
ngOnInit()이벤트 내에서 이 함수를 호출합니다. 이렇게 하면 Angular 앱이 초기화될 때$setValidity()함수를 호출합니다.
위에서 언급한 단계를 사용하여 Angular에서 $setValidity를 사용하는 방법의 예를 논의해 보겠습니다.
자바스크립트 코드:
angular.module('Adil', [
'ngRoute',
'ui.router'
])
.controller('HomeController', ['$scope', function ($scope) {
$scope.loading = false;
$scope.init = function () {
$scope.data = {
};
};
$scope.save = function (data, form) {
console.log(form);
form.input.$setValidity("name", true);
}
$scope.init();
}]);
HTML 코드:
<html>
<head>
<h1>Example of $setValidity in Angular</h1>
<script src="script.js"></script>
</head>
<body ng-app="Adil">
<form name="Name" ng-controller="HomeController">
<div class="form-group">
<label>Please Enter a Valid URL of your Website</label>
<input type="url" />
<span ng-show="Name.input.$valid"></span>
</div>
<button ng-click="save(data, Name)">Save</button>
</form>
</body>
</html>
여기를 클릭 위의 코드가 작동하는지 확인하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook