입력 유효성 검사가 실패 할 때 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 키를 누릅니다 "양식 지우기"단추가 호출되어 전체 양식이 지워집니다.

해결 방법으로

비활성화되고 숨겨진 더미 제출 버튼을 추가해야했습니다. 그리고이 더미 버튼은 아래 그림과 같이 다른 모든 버튼 위에 있어야했습니다 .

<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>

글쎄, 내 의도는 Enter를 제출하지 않았으므로 위의 해킹은 정상적으로 작동합니다.

나는 이것이 오래된 실이라는 것을 알고 있지만 나는 또한 기여할 것이라고 생각했다. 내 솔루션은 이미 답변으로 표시된 게시물과 유사합니다. 일부 인라인 JavaScript 검사는 트릭을 수행합니다.

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

나는 그것이 늦었고 응답을 받았음을 알고 있지만, 내가 만든 깔끔한 것들을 공유하고 싶습니다. 양식의 onsubmit을 연결하는 ng-validate 지시문을 작성한 다음 $ eval이 false 인 경우 prevent-default를 발행합니다.

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();            
    });
  };
});

귀하의 HTML에서 :

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">