모든 유효성 검사 오류 제거를 포함하여 양식을 재설정하려면 어떻게 해야 합니까?
저는 Angular 폼이 있습니다.합니다.ng-pattern기여하다.리셋 버튼도 있습니다.Ui를 사용하고 있습니다.Utils Event Binder를 사용하여 다음을 처리합니다.reset다음과 같은 이벤트:
<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
<div>
<label>
Area Code
<input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
</label>
<div ng-messages="searchForm.areaCode.$error">
<div class="error" ng-message="pattern">The area code must be three digits</div>
</div>
</div>
<div>
<label>
Phone Number
<input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
</label>
<div ng-messages="searchForm.phoneNumber.$error">
<div class="error" ng-message="pattern">The phone number must be seven digits</div>
</div>
</div>
<br>
<div>
<button type="reset">Reset</button>
<button type="submit" ng-disabled="searchForm.$invalid">Search</button>
</div>
</form>
, , 합니다가 됩니다.reset$scope과 같습니다 전체 컨트롤러의 모습은 다음과 같습니다.
angular.module('app').controller('mainController', function($scope) {
$scope.resetCount = 0;
$scope.reset = function(form) {
form.$setPristine();
form.$setUntouched();
$scope.resetCount++;
};
$scope.search = function() {
alert('Searching');
};
});
합니다에 form.$setPristine()그리고.form.$setUntouched, 스택 오버플로에 대한 또 다른 질문의 조언을 따릅니다.카운터를 추가한 유일한 이유는 코드가 호출되고 있다는 것을 증명하기 위해서였습니다.
문제는 양식을 재설정해도 유효성 확인 메시지가 사라지지 않는다는 점입니다.플렁커에서 전체 코드를 볼 수 있습니다.오류가 사라지지 않는다는 것을 보여주는 스크린샷은 다음과 같습니다.
저는 @Brett의 코멘트를 시작으로 그것을 토대로 만들었습니다.저는 실제로 여러 양식을 가지고 있으며 각 양식에는 여러 개의 필드가 있습니다(표시된 두 개 이상).그래서 저는 일반적인 해결책을 원했습니다.
''가 에 띄었습니다.form개체에는 각 컨트롤(입력, 선택, 텍스트 영역 등)에 대한 속성과 다른 일부 각도 속성이 있습니다.각 호()다로 합니다.$ 결국 (해서) .
$scope.reset = function(form) {
// Each control (input, select, textarea, etc) gets added as a property of the form.
// The form has other built-in properties as well. However it's easy to filter those out,
// because the Angular team has chosen to prefix each one with a dollar sign.
// So, we just avoid those properties that begin with a dollar sign.
let controlNames = Object.keys(form).filter(key => key.indexOf('$') !== 0);
// Set each control back to undefined. This is the only way to clear validation messages.
// Calling `form.$setPristine()` won't do it (even though you wish it would).
for (let name of controlNames) {
let control = form[name];
control.$setViewValue(undefined);
}
form.$setPristine();
form.$setUntouched();
};
$scope.search = {areaCode: xxxx, phoneNumber: yyyy}
위와 같이 양식의 모든 모델을 한 곳에서 구조화하여 다음과 같이 지울 수 있습니다.
$scope.search = angular.copy({});
그런 다음 이를 호출하여 유효성 검사를 재설정할 수 있습니다.
$scope.search_form.$setPristine();
$scope.search_form.$setUntouched();
$scope.search_form.$rollbackViewValue();
$errors를 각도로 재설정할 수 있는 쉬운 방법은 없는 것 같습니다.현재 페이지를 다시 로드하여 새 양식으로 시작하는 것이 가장 좋은 방법일 것입니다.또는 이 스크립트를 사용하여 $error를 수동으로 모두 제거해야 합니다.
form.$setPristine(true);
form.$setUntouched(true);
// iterate over all from properties
angular.forEach(form, function(ctrl, name) {
// ignore angular fields and functions
if (name.indexOf('$') != 0) {
// iterate over all $errors for each field
angular.forEach(ctrl.$error, function(value, name) {
// reset validity
ctrl.$setValidity(name, null);
});
}
});
$scope.resetCount++;
를 검사 에 따라 수 .ng-if아니면ng-show양식에 $유효한 플래그가 있습니다. 컨트롤러로 보낼 수 있는 $유효 플래그가 있습니다.
ng-if에 DOM다를하거나합니다.ng-show추가되지만 표시되지 않습니다(플래그 값에 depending).
편집: 마이클이 지적한 대로 양식이 비활성화되어 있으면 양식이 제출되지 않기 때문에 제가 지적한 방식이 작동하지 않습니다.그에 따라 코드를 업데이트 했습니다.
HTML
<form name="searchForm" id="searchForm" ui-event="{reset: 'reset(searchForm)'}" ng-submit="search()">
<div>
<label>
Area Code
<input type="tel" name="areaCode" ng-model="areaCode" ng-pattern="/^([0-9]{3})?$/">
</label>
<div ng-messages="searchForm.areaCode.$error">
<div class="error" ng-message="pattern" ng-if="searchForm.areaCode.$dirty">The area code must be three digits</div>
</div>
</div>
<div>
<label>
Phone Number
<input type="tel" name="phoneNumber" ng-model="phoneNumber" ng-pattern="/^([0-9]{7})?$/">
</label>
<div ng-messages="searchForm.phoneNumber.$error">
<div class="error" ng-message="pattern" ng-if="searchForm.phoneNumber.$dirty">The phone number must be seven digits</div>
</div>
</div>
<br>
<div>
<button type="reset">Reset</button>
<button type="submit" ng-disabled="searchForm.$invalid">Search</button>
</div>
</form>
JS
$scope.search = function() {
alert('Searching');
};
$scope.reset = function(form) {
form.$setPristine();
form.$setUntouched();
$scope.resetCount++;
};
워킹 솔루션이 포함된 Codepen: http://codepen.io/anon/pen/zGPZoB
리셋할 때 올바른 행동을 해야 할 것 같습니다.안타깝게도 표준 리셋을 사용하지 못했습니다.도서관도 포함하지 않습니다.ui-event내 코드와 로 하는 을 할 수 그래서 제 코드는 당신 코드와 조금 다르지만, 당신이 필요로 하는 것을 할 수 있습니다.
<form name="searchForm" id="searchForm" ng-submit="search()">
pristine = {{searchForm.$pristine}} valid ={{searchForm.$valid}}
<div>
<label>
Area Code
<input type="tel" required name="areaCode" ng-model="obj.areaCode" ng-pattern="/^([0-9]{3})?$/" ng-model-options="{ allowInvalid: true }">
</label>
<div ng-messages="searchForm.areaCode.$error">
<div class="error" ng-message="pattern">The area code must be three digits</div>
<div class="error" ng-message="required">The area code is required</div>
</div>
</div>
<div>
<label>
Phone Number
<input type="tel" required name="phoneNumber" ng-model="obj.phoneNumber" ng-pattern="/^([0-9]{7})?$/" ng-model-options="{ allowInvalid: true }">
</label>
<div ng-messages="searchForm.phoneNumber.$error">
<div class="error" ng-message="pattern">The phone number must be seven digits</div>
<div class="error" ng-message="required">The phone number is required</div>
</div>
</div>
<br>
<div>
<button ng-click="reset(searchForm)" type="reset">Reset</button>
<button type="submit" ng-disabled="searchForm.$invalid">Search</button>
</div>
</form>
그리고 JS:
$scope.resetCount = 0;
$scope.obj = {};
$scope.reset = function(form_) {
$scope.resetCount++;
$scope.obj = {};
form_.$setPristine();
form_.$setUntouched();
console.log($scope.resetCount);
};
$scope.search = function() {
alert('Searching');
};
jsfiddle의 라이브 예제.
합니다를 둡니다.ng-model-options="{allowinvalid: true}". 반드시 사용해야 합니다. 그렇지 않으면 입력 필드가 유효하지 않을 때까지 모델 값이 기록되지 않습니다.따라서 재설정이 작동하지 않습니다.
추신. 객체에 값(areaCode, phoneNumber)을 입력하면 정제가 간편해집니다.
팔로잉은 나를 위해 일했습니다.
let form = this.$scope.myForm;
let controlNames = Object.keys(form).filter(key => key.indexOf('$') !== 0);
for (let name of controlNames) {
let control = form [name];
control.$error = {};
}
간단히 말하면, ng-messages 오류를 제거하려면 각 양식 항목에 대한 $error 개체를 삭제해야 합니다.
@battmanz의 답변에 더 덧붙이지만, ES6 구문을 사용하지 않고 구형 브라우저를 지원합니다.
$scope.resetForm = function (form) {
try {
var controlNames = Object.keys(form).filter(function (key) { return key.indexOf('$') !== 0 });
console.log(controlNames);
for (var x = 0; x < controlNames.length; x++) {
form[controlNames[x]].$setViewValue(undefined);
}
form.$setPristine();
form.$setUntouched();
} catch (e) {
console.log('Error in Reset');
console.log(e);
}
};
저도 같은 문제가 있어서 battmanz solution(받아들인 답변)을 하려고 했습니다.
저는 그의 대답이 정말 좋다고 확신하지만, 저에게는 효과가 없었습니다.
저는 ng-model을 사용하여 데이터를 바인딩하고 있으며 입력에는 각도 자료 라이브러리를 사용하고 오류 메시지에는 ng-message 지시문을 사용하고 있으므로 동일한 구성을 사용하는 사람에게만 유용할 수 있습니다.
자바스크립트에서 컨트롤러 객체 형태를 많이 봤는데, 실제로 battmanz가 언급한 것처럼 $각도 함수가 많고, 필드 이름도 있는데, 필드에 일부 함수가 있는 객체입니다.
그래서 당신의 양식을 정리하는 것은 무엇입니까?
보통 폼을 json 객체로 보고 모든 필드는 이 json 객체의 키에 바인딩됩니다.
//lets call here this json vm.form
vm.form = {};
//you should have something as ng-model = "vm.form.name" in your view
그래서 처음에는 양식을 지우기 위해 제출 양식의 콜백을 했습니다.
vm.form = {};
그리고 이 질문에서 설명했듯이, ng 메시지는 그것과 함께 사라지지 않을 것입니다, 그것은 정말 나쁜 것입니다.
battmanz solution을 써보니 메시지가 더이상 뜨지않았지만 내가 작성해도 제출후 필드가 더이상 비어있지않았습니다
vm.form = {};
그리고 저는 그것이 정상이라는 것을 알게 되었습니다. 왜냐하면 그의 솔루션을 사용하면 모든 필드가 정의되지 않은 상태로 설정되기 때문에 실제로 모델 바인딩이 실제로 폼에서 제거되기 때문입니다.그래서 텍스트는 여전히 보기에 있었습니다. 왜냐하면 어떻게든 더 이상 구속력이 없기 때문이고 HTML에 남아 있기로 결정했기 때문입니다.
그래서 내가 뭘 했을까요?
실제로 필드를 지우고(바인딩을 {}(으)로 설정), 그냥 사용했습니다.
form.$setPristine();
form.$setUntouched();
사실 논리적인 것 같아요, 바인딩이 아직 여기에 있기 때문에 폼의 값은 이제 비어있고, 폼이 손상되지 않은 경우에만 각 ng-messages directive가 트리거되므로 결국 정상이라고 생각합니다.
최종 코드는 다음과 같습니다.
function reset(form) {
form.$setPristine();
form.$setUntouched();
};
이 문제로 인해 발생한 큰 문제:
단 한 번, 콜백이 어딘가를 망친 것 같고, 어쩐지 필드가 비어 있지 않았습니다(제출 버튼을 클릭하지 않은 것 같습니다).
다시 클릭해보니 발송된 날짜가 비어있었습니다.필요한 필드가 올바른 패턴으로 채워지지 않을 때는 내 제출 버튼이 비활성화되어야 하기 때문에 더욱 이상합니다. 그리고 빈 필드는 확실히 좋은 필드가 아니기 때문입니다.
저는 제 방식이 최선인지 심지어 올바른지 모르겠습니다. 만약 제가 직면한 문제에 대해 비평가나 제안이 있으시면 말씀해주세요. 저는 항상 각을 세우고 나서는 것을 좋아합니다.JS.
이것이 누군가에게 도움이 되기를 바라며 영어를 못해서 미안합니다.
loginForm 개체를 함수에 전달할 수 있습니다.ng-click="userCtrl.login(loginForm)그리고 함수 호출에서.
this.login = function (loginForm){
loginForm.$setPristine();
loginForm.$setUntouched();
}
그래서 어떤 대답도 제게 완전히 통하지 않았습니다.특히 보기 값을 지워서 답변 보기 값을 모두 지워서 오류를 지우고 선택 항목을 j 쿼리로 지웠습니다(필드가 모델 이름과 동일하게 입력 및 이름이 입력된 경우).
var modelNames = Object.keys($scope.form).filter(key => key.indexOf('$') !== 0);
modelNames.forEach(function(name){
var model = $scope.form[name];
model.$setViewValue(undefined);
jq('input[name='+name+']').val('');
angular.forEach(model.$error, function(value, name) {
// reset validity
model.$setValidity(name, null);
});
});
$scope.form.$setPristine();
$scope.form.$setUntouched();
언급URL : https://stackoverflow.com/questions/31010096/how-do-i-reset-a-form-including-removing-all-validation-errors
'programing' 카테고리의 다른 글
| 웹으로 URL 재작성을 하려면 어떻게 해야 합니까?Release.config 변환? (0) | 2023.10.06 |
|---|---|
| Wordpress Editor는 렌더링할 때 상위 항목에 표시되지 않는 경우 작동하지 않습니다. (0) | 2023.10.06 |
| 다람쥐 SQL에서 Oracle 저장 프로시저 호출 (0) | 2023.10.06 |
| IIS에서 powershell 스크립트를 사용하여 응용 프로그램 풀을 시작하고 중지하는 방법 (0) | 2023.10.06 |
| MySQL get mindate 및 maxdate를 하나의 쿼리로 얻을 수 있습니다. (0) | 2023.10.06 |