입력 유효성 검사가 실패 할 때 Angularjs가 양식 제출을 방지
클라이언트 측 입력 유효성 검사와 함께 angularjs를 사용하여 간단한 로그인 양식을 작성하여 사용자 이름과 암호가 비어 있지 않고 3 자보다 길지 않은지 확인하고 있습니다. 아래 코드를 참조하십시오 :
<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
<fieldset>
<div class="control-group input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
</div>
<div class="control-group input-prepend">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
</div>
<div class="control-group">
<input class="btn" type="submit" value="Log in">
</div>
</fieldset>
</form>
그리고 컨트롤러 :
var controller = function($scope) {
$scope.login = {
submit: function() {
Console.info($scope.login.username + ' ' + $scope.login.password);
}
}
};
문제는 login.submit
입력이 유효하지 않더라도 함수가 호출 된다는 것입니다. 이 행동을 막을 수 있습니까?
부수적으로 부트 스트랩과 requirejs를 사용한다고 언급 할 수 있습니다.
넌 할 수있어:
<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">
컨트롤러 점검이 필요 없습니다.
제출 단추를 다음으로 변경하십시오.
<button type="submit" ng-disabled="loginform.$invalid">Login</button>
따라서 TheHippo의 제안 된 답변이 저에게 효과적이지 않은 대신 양식을 매개 변수로 함수에 다음과 같이 전송했습니다.
<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">
이렇게하면 컨트롤러 방식에서 양식을 사용할 수 있습니다.
$scope.login = {
submit : function(form) {
if(form.$valid)....
}
양식은 자동으로 $ scope에 객체로 배치됩니다. 그것은 통해 액세스 할 수 있습니다$scope[formName]
아래는 ng-submit에서 매개 변수로 양식 자체를 전달하지 않고 원래 설정에서 작동하는 예제입니다.
var controller = function($scope) {
$scope.login = {
submit: function() {
if($scope.loginform.$invalid) return false;
}
}
};
작업 예 : http://plnkr.co/edit/BEWnrP?p=preview
HTML :
<div class="control-group">
<input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>
컨트롤러에서 :
$scope.login = {
onSubmit: function(event) {
if (dataIsntValid) {
displayErrors();
event.preventDefault();
}
else {
submitData();
}
}
}
OPs 질문에 대한 직접적인 해결책은 아니지만 양식이 ng-app
컨텍스트 내에 있지만 Angular가 완전히 무시하기를 원하는 경우 ngNonBindable
지시문을 사용하여 명시 적으로 수행 할 수 있습니다 .
<form ng-non-bindable>
...
</form>
위의 답변에 추가하면
아래와 같이 2 개의 일반 버튼이 있습니다. (어딘가에 type = "submit"없음)
<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>
아무리 시도해도 양식이 유효하면 Enter 키를 누르면 "양식 지우기"단추가 호출되어 전체 양식이 지워집니다.
해결 방법으로
I had to add a dummy submit button which was disabled and hidden. And This dummy button had to be on top of all the other buttons as shown below.
<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>
<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>
Well, my intention was never to submit on Enter, so the above given hack just works fine.
I know this is an old thread but I thought I'd also make a contribution. My solution being similar to the post already marked as an answer. Some inline JavaScript checks does the trick.
ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"
I know it's late and was answered, but I'd like to share the neat stuff I made. I created an ng-validate directive that hooks the onsubmit of the form, then it issues prevent-default if the $eval is false:
app.directive('ngValidate', function() {
return function(scope, element, attrs) {
if (!element.is('form'))
throw new Error("ng-validate must be set on a form elment!");
element.bind("submit", function(event) {
if (!scope.$eval(attrs.ngValidate, {'$event': event}))
event.preventDefault();
if (!scope.$$phase)
scope.$digest();
});
};
});
In your html:
<form name="offering" method="post" action="offer" ng-validate="<boolean expression">
'Programing' 카테고리의 다른 글
코드 골프 : 레이저 (0) | 2020.06.09 |
---|---|
파이썬에서 정수를 이진수로 변환 (0) | 2020.06.09 |
JavaScript에서 많은 수의 과학적 표기법을 피하는 방법은 무엇입니까? (0) | 2020.06.08 |
"로컬 복사"및 프로젝트 참조에 대한 모범 사례는 무엇입니까? (0) | 2020.06.08 |
.py 파일을 구문 분석하고 AST를 읽고 수정 한 다음 수정 된 소스 코드를 다시 작성하십시오. (0) | 2020.06.08 |