이 방법을 사용하고 있습니다 : http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p=preview 를 사용하여 흐림에 대한 필드 만 확인합니다. 이것은 잘 작동하지만 사용자가 ‘제출’버튼 (실제 제출이 아니라 함수에 대한 data-ng-click 호출)을 클릭 할 때 유효성을 검사 (따라서 해당 필드에 대한 오류가있는 경우 표시)하고 싶습니다.
해당 버튼을 클릭 할 때 모든 필드에 대한 유효성 검사를 다시 트리거하는 방법이 있습니까?
답변
답변
대답하기에는 너무 늦었지만, 모든 양식을 더럽 히기 만하면됩니다. 다음 스 니펫을 살펴보십시오.
angular.forEach($scope.myForm.$error.required, function(field) {
field.$setDirty();
});
그런 다음 다음을 사용하여 양식이 유효한지 확인할 수 있습니다.
if($scope.myForm.$valid) {
//Do something
}
마지막으로 모든 것이 좋아 보인다면 경로를 변경하고 싶을 것입니다.
$location.path('/somePath');
편집 : 제출 이벤트가 트리거 될 때까지 양식이 범위에 등록되지 않습니다. ng-submit 지시문을 사용하여 함수를 호출하고 위의 함수를 해당 함수에 래핑하면 작동합니다.
답변
누군가가 나중에 이것에 다시 올 경우 … 위의 어느 것도 나를 위해 일하지 않았습니다. 그래서 각도 형식 유효성 검사의 핵심을 파헤 치고 주어진 필드에서 유효성 검사기를 실행하기 위해 호출하는 함수를 찾았습니다. 이 속성은 편리하게 호출 $validate됩니다.
명명 된 form이있는 경우 myForm프로그래밍 방식으로 호출 myForm.my_field.$validate()하여 필드 유효성 검사를 실행할 수 있습니다 . 예를 들면 :
<div ng-form name="myForm">
<input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>
호출 $validate은 모델에 영향을 미칩니다. ngModelCtrl. $ validate에 대한 각도 문서에서 :
등록 된 각 유효성 검사기를 실행합니다 (첫 번째 동기 유효성 검사기 다음 비동기 유효성 검사기). 유효성이 유효하지 않은 것으로 변경되면 ngModelOptions.allowInvalid가 true가 아닌 한 모델이 정의되지 않음으로 설정됩니다. 유효성이 valid로 변경되면 모델이 마지막으로 사용 가능한 유효한 $ modelValue, 즉 마지막으로 구문 분석 된 값 또는 범위에서 설정된 마지막 값으로 설정됩니다.
따라서 유효하지 않은 모델 값 (예 : 그렇게 알리는 메시지 표시)으로 무언가를 할 계획이라면 모델 allowInvalid에 true대해 로 설정되어 있는지 확인해야합니다 .
답변
Angular-Validator 를 사용 하여 원하는 작업을 수행 할 수 있습니다. 사용하기는 어리 석습니다.
그것은 :
- 필드의 유효성을 검사합니다
$dirty.submit - 유효하지 않은 경우 양식 제출 방지
- 필드가
$dirty있거나 양식이 제출 된 후 사용자 지정 오류 메시지 표시
예
<form angular-validator
angular-validator-submit="myFunction(myBeautifulForm)"
name="myBeautifulForm">
<!-- form fields here -->
<button type="submit">Submit</button>
</form>
필드가 통과하지 못하면 validator사용자는 양식을 제출할 수 없습니다.
확인 각도 – 검증의 사용 사례 및 예제를 자세한 내용은.
면책 조항 : 저는 Angular-Validator의 저자입니다.
답변
음, 각진 방법은 유효성 검사를 처리하도록하는 것입니다.-모든 모델 변경에서 수행되기 때문에-원하는 경우에만 결과를 사용자에게 보여줍니다.
이 경우 오류를 표시 할시 기를 결정하고 플래그를 설정하기 만하면됩니다.
http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview
내가 아는 한 더 고급 양식 제어를 할 수 있도록 각도에 문제가 있습니다. 해결되지 않았기 때문에 기존의 모든 유효성 검사 방법을 재발 명하는 대신 이것을 사용합니다.
편집 : 그러나 당신이 당신의 길을 주장한다면, 여기에 제출하기 전에 유효성 검사가있는 수정 된 바이올린이 있습니다. http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview
컨트롤러는 버튼을 클릭 할 때 이벤트를 브로드 캐스트하고 지시문은 유효성 검사 마법을 수행합니다.
답변
한 가지 접근 방식은 모든 속성을 더티하게 만드는 것입니다. 각 컨트롤러에서 할 수 있지만 매우 지저분합니다. 일반적인 해결책이있는 것이 좋습니다.
제가 생각할 수있는 가장 쉬운 방법은
- 양식 제출 속성을 처리합니다.
- 모든 양식 필드를 반복하고 깨끗한 필드를 더티 표시합니다.
- 제출 함수를 호출하기 전에 양식이 유효한지 확인합니다.
다음은 지침입니다.
myModule.directive('submit', function() {
return {
restrict: 'A',
link: function(scope, formElement, attrs) {
var form;
form = scope[attrs.name];
return formElement.bind('submit', function() {
angular.forEach(form, function(field, name) {
if (typeof name === 'string' && !name.match('^[\$]')) {
if (field.$pristine) {
return field.$setViewValue(field.$value);
}
}
});
if (form.$valid) {
return scope.$apply(attrs.submit);
}
});
}
};
});
다음과 같이 양식 html을 업데이트하십시오.
<form ng-submit='justDoIt()'>
된다 :
<form name='myForm' novalidate submit='justDoIt()'>
여기에서 전체 예를 참조하십시오. http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p=preview
답변
다음은 양식 오류 메시지를 표시하는 전역 함수입니다.
function show_validation_erros(form_error_object) {
angular.forEach(form_error_object, function (objArrayFields, errorName) {
angular.forEach(objArrayFields, function (objArrayField, key) {
objArrayField.$setDirty();
});
});
};
그리고 내 모든 컨트롤러에서
if ($scope.form_add_sale.$invalid) {
$scope.global.show_validation_erros($scope.form_add_sale.$error);
}
