브라우저는 required, pattern 과 같은 것으로 기본적인 폼 validation 처리를 할 수 있다.
input이 이 조건이 충족되지 않으면 submit을 하지 않는다.
angular는 여기에 더해서 ng-minlength, ng-maxlength, ng-pattern 과 같은 것들을 제공한다. 그러나 문제는 form submit을 막아주지는 않는다. form submit을 못하게 하려면 어떻게 하나?
action속성을 제거하고 ng-submit을 사용하는 방법이 있다.
$scope.mainFormSubmit = function() { if (!$scope.mainForm.$valid) { $log.log("form is invalid"); } else { $log.log("form is ok"); // set action and submit using jQuery ? } };
하지만 action 속성을 줄 수 없으니 갑갑하다.
또 하나의 방법은 submit 타입의 버튼을 없애고 button이나 anchor로 바꾸는 것을 생각해 볼 수 있다. ng-click handler에서 submit하면 된다. 이러면 action 속성을 줄 수 있다.
보너스로 아래와 같이 메시지로 피드백을 줄 수도 있겠다.
.alert.alert-error(ng-show="!mainForm.$valid") 입력값이 올바르지 않습니다.
댓글 없음:
댓글 쓰기