Angularjs ngăn gửi biểu mẫu khi xác thực đầu vào không thành công

Tôi đang viết một biểu mẫu đăng nhập đơn giản bằng angularjs với một số xác thực nhập vào phía máy khách để kiểm tra xem tên người dùng và mật khẩu không trống và dài hơn ba ký tự. Xem mã dưới đây:

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

Và bộ điều khiển:

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

Vấn đề là login.submitchức năng sẽ được gọi ngay cả khi đầu vào không hợp lệ. Có thể ngăn chặn hành vi này?

Như một lưu ý phụ tôi có thể đề cập rằng tôi cũng sử dụng bootstrap và requestjs.

Bạn có thể làm:

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

Không cần kiểm tra bộ điều khiển.

Thay đổi nút gửi thành:

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

Vì vậy, câu trả lời được đề xuất từ ​​TheHippo không hoạt động với tôi, thay vào đó tôi đã gửi biểu mẫu dưới dạng tham số cho hàm như vậy:

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

Điều này làm cho biểu mẫu có sẵn trong phương thức điều khiển:

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

Các biểu mẫu của bạn được tự động đưa vào phạm vi $ dưới dạng một đối tượng. Nó có thể được truy cập thông qua$scope[formName]

Dưới đây là một ví dụ sẽ hoạt động với thiết lập ban đầu của bạn và không phải vượt qua chính biểu mẫu dưới dạng tham số trong ng-submit.

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

Ví dụ hoạt động: 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>

Trong bộ điều khiển của bạn:

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

Mặc dù không phải là giải pháp trực tiếp cho câu hỏi OP, nếu biểu mẫu của bạn nằm trong ng-appngữ cảnh, nhưng bạn muốn Angular bỏ qua nó hoàn toàn, bạn có thể thực hiện điều này một cách rõ ràng bằng cách sử dụng lệnh ngNonBindable:

<form ng-non-bindable>
  ...
</form>

Chỉ cần thêm vào các câu trả lời ở trên,

Tôi đã có 2 nút thông thường như hình dưới đây. (Không có loại = "gửi" bất cứ nơi nào)

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

Cho dù tôi đã cố gắng bao nhiêu, nhấn enter một khi biểu mẫu hợp lệ , nút "Xóa biểu mẫu" được gọi, xóa toàn bộ biểu mẫu.

Như một cách giải quyết,

Tôi đã phải thêm một nút gửi giả đã bị vô hiệu hóa và ẩn. Và nút giả này phải nằm trên tất cả các nút khác như hình bên dưới .

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

Chà, ý định của tôi là không bao giờ gửi trên Enter, vì vậy bản hack đã cho ở trên chỉ hoạt động tốt.

Tôi biết đây là một chủ đề cũ nhưng tôi nghĩ tôi cũng sẽ đóng góp. Giải pháp của tôi tương tự như bài viết đã được đánh dấu là một câu trả lời. Một số kiểm tra JavaScript nội tuyến thực hiện các mẹo.

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

Tôi biết đã muộn và đã được trả lời, nhưng tôi muốn chia sẻ những thứ gọn gàng tôi đã làm. Tôi đã tạo một lệnh ng-xác thực mà móc ra các phần tử của biểu mẫu, sau đó nó sẽ phát sinh lỗi mặc định nếu $ eval là sai:

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

Trong html của bạn:

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