Angular에 사용자 지정 유효성 검사를 추가하는 방법JS폼?
및 했습니다.required어트리뷰트 등입니다.그러나 일부 필드에서는 추가 검증을 수행해야 합니다.FormController★★★★★★★★★★★★★★★★★?
커스텀 검증은, 「이 3개의 필드가 입력되어 있는 경우는, 이 필드는 필수이며, 특정의 방법으로 포맷할 필요가 있습니다」와 같은 경우가 있습니다.
하다 보면 FormController.$setValidity공개 API가 아닌 것 같아서 안 쓰는 게 나을 것 같아요. 작성 및 NgModelController다른 옵션처럼 보이지만 기본적으로 각 커스텀 검증 규칙에 대한 지시문을 작성해야 합니다.
하는 것(「」도 무효로 ).FormController가장 간단한 시나리오에서는 작업을 완료하기 위해 필요한 것이기도 합니다만, 어떻게 해야 할지 모르겠습니다.
편집: 아래에 ngMessages(>= 1.3.X)에 대한 정보를 추가했습니다.
표준 폼 검증 메시지(1.0.X 이후)
이것은 Google 「Angular Form Validation」을 검색했을 경우의 상위 결과 중 하나이기 때문에, 현시점에서는, 거기서 오시는 분들을 위해서, 또 다른 답변을 추가하고 싶습니다.
Form Controller에는 메서드가 있습니다.$setValidity는 퍼블릭 API가 아닌 것 같아서 사용하지 않습니다.
공공장소니까 걱정 마쓰세요.그래서 하는 거야.사용할 의도가 아니었다면 앵글 개발자들이 폐쇄적으로 사유화했을 겁니다
커스텀 검증을 실시하려면 , Angular-UI 를 다른 회답으로 사용하고 싶지 않은 경우는, 독자적인 검증 디렉티브를 롤 하면 됩니다.
app.directive('blacklist', function (){
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
var blacklist = attr.blacklist.split(',');
//For DOM -> model validation
ngModel.$parsers.unshift(function(value) {
var valid = blacklist.indexOf(value) === -1;
ngModel.$setValidity('blacklist', valid);
return valid ? value : undefined;
});
//For model -> DOM validation
ngModel.$formatters.unshift(function(value) {
ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
return value;
});
}
};
});
다음은 사용 예를 제시하겠습니다.
<form name="myForm" ng-submit="doSomething()">
<input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
<span ng-show="myForm.fruitName.$error.blacklist">
The phrase "{{data.fruitName}}" is blacklisted</span>
<span ng-show="myForm.fruitName.$error.required">required</span>
<button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
1.2에서는 1.2.X로 것이 .ng-if★★★★★★에ng-show
다음은 필수 플런커 링크입니다.
또, 이 주제에 관한 블로그 엔트리를 몇개 작성했습니다만, 조금 더 자세하게 설명하겠습니다.
편집: 1.3에서 ng Messages를 사용합니다.x
이제 ngShow 대신 ngMessages 모듈을 사용하여 오류 메시지를 표시할 수 있습니다.실제로는 어떤 경우에도 동작합니다.에러 메시지일 필요는 없습니다만, 기본적인 것은 다음과 같습니다.
<script src="angular-messages.js"></script>★★
ngMessages듈듈: :var app = angular.module('myApp', ['ngMessages']);적절한 마크업을 추가합니다.
<form name="personForm"> <input type="email" name="email" ng-model="person.email" required/> <div ng-messages="personForm.email.$error"> <div ng-message="required">required</div> <div ng-message="email">invalid email</div> </div> </form>
에서는 '''가 표시되어 있습니다.ng-message="personForm.email.$error"으로는 '를 지정합니다.ng-message그럼 ng-message="required" ★★★★★★★★★★★★★★★★★」ng-message="email"감시할 컨텍스트의 속성을 지정합니다.가장 중요한 것은 체크인 순서도 지정하는 것입니다.목록에서 가장 먼저 발견된 "더러운" 메시지가 승리하고 다른 메시지는 표시되지 않습니다.
또한 ngMessages의 예에 대한 플런커입니다.
Angular-UI 프로젝트에는 UI 검증 디렉티브가 포함되어 있어 도움이 될 것입니다.검증을 수행하기 위해 호출할 함수를 지정할 수 있습니다.
데모 페이지를 참조해 주세요.http://angular-ui.github.com/,에서 Validate 제목까지 검색합니다.
데모 페이지:
<input ng-model="email" ui-validate='{blacklist : notBlackListed}'>
<span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
컨트롤러에서 다음을 수행합니다.
function ValidateCtrl($scope) {
$scope.blackList = ['bad@domain.example','verybad@domain.example'];
$scope.notBlackListed = function(value) {
return $scope.blackList.indexOf(value) === -1;
};
}
검증 시나리오에서는 ng-required를 사용할 수 있습니다("다음 3개의 필드가 입력되어 있는 경우 이 필드는 필수입니다")
<div ng-app>
<input type="text" ng-model="field1" placeholder="Field1">
<input type="text" ng-model="field2" placeholder="Field2">
<input type="text" ng-model="field3" placeholder="Field3">
<input type="text" ng-model="dependentField" placeholder="Custom validation"
ng-required="field1 && field2 && field3">
</div>
각도 검증자를 사용할 수 있습니다.
예: 함수를 사용하여 필드를 검증합니다.
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "myCustomValidationFunction(form.firstName)">
그러면 컨트롤러에는 다음과 같은 기능이 있습니다.
$scope.myCustomValidationFunction = function(firstName){
if ( firstName === "John") {
return true;
}
다음과 같은 작업을 수행할 수도 있습니다.
<input type = "text"
name = "firstName"
ng-model = "person.firstName"
validator = "'!(field1 && field2 && field3)'"
invalid-message = "'This field is required'">
(여기서 field1 field2 및 field3은 스코프 변수입니다.필드가 빈 문자열과 일치하지 않는지 확인할 수도 있습니다).
가 ""를 "validator그러면 필드가 유효하지 않은 것으로 표시되며 사용자는 양식을 제출할 수 없습니다.
자세한 사용 사례 및 예는 https://github.com/turinggroup/angular-validator를 참조하십시오.
면책사항:나는 각도 검증기의 저자이다.
나는 최근 각도 형태 입력의 표현식 기반 무효화를 허용하는 지시문을 만들었다.유효한 각도 표현식을 사용할 수 있으며 개체 표기법을 사용한 사용자 지정 유효성 검사 키를 지원합니다.각도 v1.3.8로 테스트 완료
.directive('invalidIf', [function () {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var argsObject = scope.$eval(attrs.invalidIf);
if (!angular.isObject(argsObject)) {
argsObject = { invalidIf: attrs.invalidIf };
}
for (var validationKey in argsObject) {
scope.$watch(argsObject[validationKey], function (newVal) {
ctrl.$setValidity(validationKey, !newVal);
});
}
}
};
}]);
다음과 같이 사용할 수 있습니다.
<input ng-model="foo" invalid-if="{fooIsGreaterThanBar: 'foo > bar',
fooEqualsSomeFuncResult: 'foo == someFuncResult()'}/>
또는 식을 전달하기만 하면 됩니다(기본 validationKey가 "invalidIf"로 지정됩니다).
<input ng-model="foo" invalid-if="foo > bar"/>
다음은 폼에서 사용자 지정 와일드카드 식 검증을 수행하는 멋진 방법입니다(From: Angular를 사용한 고급 폼 검증).JS 및 필터):
<form novalidate="">
<input type="text" id="name" name="name" ng-model="newPerson.name"
ensure-expression="(persons | filter:{name: newPerson.name}:true).length !== 1">
<!-- or in your case:-->
<input type="text" id="fruitName" name="fruitName" ng-model="data.fruitName"
ensure-expression="(blacklist | filter:{fruitName: data.fruitName}:true).length !== 1">
</form>
app.directive('ensureExpression', ['$http', '$parse', function($http, $parse) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, ngModelController) {
scope.$watch(attrs.ngModel, function(value) {
var booleanResult = $parse(attrs.ensureExpression)(scope);
ngModelController.$setValidity('expression', booleanResult);
});
}
};
}]);
jsFiddle 데모(식 이름 지정 및 다중 식 지원)
와와니다 it it to ui-validate단, 스코프 고유의 검증기능(일반적으로 동작)은 필요 없습니다.물론 UI.sls는 이 방법으로 동작하지 않습니다.
@synergetic @blesh는 다음과 같이 함수 검증을 해야 한다고 생각합니다.
function validate(value) {
var valid = blacklist.indexOf(value) === -1;
ngModel.$setValidity('blacklist', valid);
return valid ? value : undefined;
}
ngModel.$formatters.unshift(validate);
ngModel.$parsers.unshift(validate);
업데이트:
동일한 기능을 가진 이전 지침의 개선되고 간소화된 버전(2개가 아닌 1개)
.directive('myTestExpression', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
var expr = attrs.myTestExpression;
var watches = attrs.myTestExpressionWatch;
ctrl.$validators.mytestexpression = function (modelValue, viewValue) {
return expr == undefined || (angular.isString(expr) && expr.length < 1) || $parse(expr)(scope, { $model: modelValue, $view: viewValue }) === true;
};
if (angular.isString(watches)) {
angular.forEach(watches.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
ctrl.$validate();
});
});
}
}
};
}])
사용 예:
<input ng-model="price1"
my-test-expression="$model > 0"
my-test-expression-watch="price2,someOtherWatchedPrice" />
<input ng-model="price2"
my-test-expression="$model > 10"
my-test-expression-watch="price1"
required />
결과: 다른 지시 모델 및 현재 모델을 변경할 때 검증자가 실행되는 상호 종속적인 테스트 식입니다.
은 로컬 입니다.$model변수를 다른 변수와 비교하는 데 사용해야 합니다.
이전 이야기:
추가 디렉티브를 추가하여 @Plantface 코드를 개선하려고 했습니다.이 추가 디렉티브는 여러 ngModel 변수를 변경할 때 식을 실행해야 하는 경우에 매우 유용합니다.
.directive('ensureExpression', ['$parse', function($parse) {
return {
restrict: 'A',
require: 'ngModel',
controller: function () { },
scope: true,
link: function (scope, element, attrs, ngModelCtrl) {
scope.validate = function () {
var booleanResult = $parse(attrs.ensureExpression)(scope);
ngModelCtrl.$setValidity('expression', booleanResult);
};
scope.$watch(attrs.ngModel, function(value) {
scope.validate();
});
}
};
}])
.directive('ensureWatch', ['$parse', function ($parse) {
return {
restrict: 'A',
require: 'ensureExpression',
link: function (scope, element, attrs, ctrl) {
angular.forEach(attrs.ensureWatch.split(",").filter(function (n) { return !!n; }), function (n) {
scope.$watch(n, function () {
scope.validate();
});
});
}
};
}])
이를 사용하여 교차 검증된 필드를 만드는 예:
<input name="price1"
ng-model="price1"
ensure-expression="price1 > price2"
ensure-watch="price2" />
<input name="price2"
ng-model="price2"
ensure-expression="price2 > price3"
ensure-watch="price3" />
<input name="price3"
ng-model="price3"
ensure-expression="price3 > price1 && price3 > price2"
ensure-watch="price1,price2" />
ensure-expression하기 위해 됩니다.ng-model ensure-watch변수가 변경됩니다.
서버를 호출하는 커스텀 검증
ngModelController API를 사용하여 비동기 검증(예:$http백엔드에 요구합니다.개체에 추가된 함수는 유효할 때 해결되어야 하는 약속을 반환해야 하며 무효일 때 거부되어야 합니다. 중인 로 " "에됩니다.ngModelController.$pending자세한 내용은 Angular를 참조하십시오.JS Developer Guide - Forms(사용자 정의 검증).
ngModel.$asyncValidators.uniqueUsername = function(modelValue, viewValue) {
var value = modelValue || viewValue;
// Lookup user by username
return $http.get('/api/users/' + value).
then(function resolved() {
//username exists, this means validation fails
return $q.reject('exists');
}, function rejected() {
//username does not exist, therefore this validation passes
return true;
});
};
상세한 것에 대하여는, 을 참조해 주세요.
「 」의 $validators
은 ""를 합니다.$parsers ★★★★★★★★★★★★★★★★★」$formatters파이프라인에서 커스텀 동기 검증기를 추가합니다.AngularJS.3는 AngularJS 1.3+a를 했다.$validators 필요가 없습니다.$parsers ★★★★★★★★★★★★★★★★★」$formatters★★★★★★★★★★★★★★★★★★:
app.directive('blacklist', function (){
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
ngModel.$validators.blacklist = function(modelValue, viewValue) {
var blacklist = attr.blacklist.split(',');
var value = modelValue || viewValue;
var valid = blacklist.indexOf(value) === -1;
return valid;
});
}
};
});
자세한 내용은 각도를 참조하십시오.JS ngModelController API 참조 - $validators.
각진 상태JS는 Cutsom 디렉티브를 정의하는 데 가장 적합합니다.각진JS는 ngMessages 모듈을 제공합니다.
ngMessages는 리슨하는 키/값 객체의 상태에 따라 메시지를 표시하거나 숨기도록 설계된 명령어입니다.디렉티브 자체는 오류 메시지보고를 ngModel $error 개체(검증 오류 키/값 상태를 저장)로 보완합니다.
커스텀 폼 검증에서는 커스텀 디렉티브와 함께 ngMessages 모듈을 사용해야 합니다.여기에 6보다 작은 숫자인지 확인하는 간단한 검증이 있습니다. 화면에 오류를 표시합니다.
<form name="myform" novalidate>
<table>
<tr>
<td><input name='test' type='text' required ng-model='test' custom-validation></td>
<td ng-messages="myform.test.$error"><span ng-message="invalidshrt">Too Short</span></td>
</tr>
</table>
</form>
커스텀 검증 디렉티브를 작성하는 방법은 다음과 같습니다.
angular.module('myApp',['ngMessages']);
angular.module('myApp',['ngMessages']).directive('customValidation',function(){
return{
restrict:'A',
require: 'ngModel',
link:function (scope, element, attr, ctrl) {// 4th argument contain model information
function validationError(value) // you can use any function and parameter name
{
if (value.length > 6) // if model length is greater then 6 it is valide state
{
ctrl.$setValidity('invalidshrt',true);
}
else
{
ctrl.$setValidity('invalidshrt',false) //if less then 6 is invalide
}
return value; //return to display error
}
ctrl.$parsers.push(validationError); //parsers change how view values will be saved in the model
}
};
});
$setValidity는 모델 상태를 합니다.
검증에서 대소문자를 구분하는지 여부를 지정하는 기능으로 @Ben Lesh의 답변을 확장했습니다(기본값).
용도:
<input type="text" name="fruitName" ng-model="data.fruitName" blacklist="Coconuts,Bananas,Pears" caseSensitive="true" required/>
코드:
angular.module('crm.directives', []).
directive('blacklist', [
function () {
return {
restrict: 'A',
require: 'ngModel',
scope: {
'blacklist': '=',
},
link: function ($scope, $elem, $attrs, modelCtrl) {
var check = function (value) {
if (!$attrs.casesensitive) {
value = (value && value.toUpperCase) ? value.toUpperCase() : value;
$scope.blacklist = _.map($scope.blacklist, function (item) {
return (item.toUpperCase) ? item.toUpperCase() : item
})
}
return !_.isArray($scope.blacklist) || $scope.blacklist.indexOf(value) === -1;
}
//For DOM -> model validation
modelCtrl.$parsers.unshift(function (value) {
var valid = check(value);
modelCtrl.$setValidity('blacklist', valid);
return value;
});
//For model -> DOM validation
modelCtrl.$formatters.unshift(function (value) {
modelCtrl.$setValidity('blacklist', check(value));
return value;
});
}
};
}
]);
이 글에서 몇 가지 훌륭한 예시와 입담들이 제시되어 있지만, 그것들은 내가 찾던 것을 제대로 가지고 있지 않았다.제 접근법: 각도 검증 - 비동기 검증을 위한 약속 기반 검증 lib, 옵션인 부트스트랩 스타일링 내장.
OP의 사용 사례에 대한 각도 유효성 솔루션은 다음과 같습니다.
<input type="text" name="field4" ng-model="field4"
validity="eval"
validity-eval="!(field1 && field2 && field3 && !field4)"
validity-message-eval="This field is required">
여기 바이올린이 있어요, 한번 타보고 싶으면요.lib는 GitHub에서 사용할 수 있으며 상세한 문서와 많은 라이브 데모를 갖추고 있습니다.
언급URL : https://stackoverflow.com/questions/12581439/how-to-add-custom-validation-to-an-angularjs-form
'programing' 카테고리의 다른 글
| MongoDB/NoSQL: 문서 변경 기록 보관 (0) | 2023.03.18 |
|---|---|
| 단일 페이지 워드프레스를 나뭇가지로 렌더링하는 방법 (0) | 2023.03.18 |
| 모든 플러그인이 이미 업데이트되어 있는 경우 WordPress에 플러그인 업데이트가 1개 있음을 표시함 (0) | 2023.03.18 |
| 여러 Spring Boot 간에 테스트컨테이너를 재사용하는 방법테스트? (0) | 2023.03.18 |
| 메서드 매개 변수에서 WCF webHttpBinding 오류가 발생했습니다."래퍼 요소 없이 최대 하나의 본문 매개 변수를 직렬화할 수 있습니다." (0) | 2023.03.13 |