2012-10-25

angular form validation 좋은 방법 없나?

제대로 하려면 일관된 방법이 있을 것 같기는 한데, 아직 어떻게 해야 할지 아이디어가 안잡히다보니 일단 이정도로만 처리하자. 더 좋은 방법이 있으면 누가 좀 알려주세요.

브라우저는 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") 입력값이 올바르지 않습니다.

댓글 없음:

댓글 쓰기