Angularjs запобігає надсиланню форми, коли перевірка введення не вдається

Я пишу просту форму для входу, використовуючи angularjs з певним підтвердженням входу на стороні клієнта, щоб перевірити, чи ім’я користувача та пароль не порожні та довші трьох символів. Дивіться код нижче:

<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функція буде викликана, навіть якщо введення недійсне. Чи можна запобігти такій поведінці?

В якості бічної записки можу зазначити, що я також використовую завантажувальний і запуск.

Ви можете зробити:

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

Хоча це не пряме рішення для питання про ОП, якщо ваша форма знаходиться в ng-appконтексті, але ви хочете, щоб Angular цілком її ігнорував, ви можете це зробити прямо, використовуючи ngNonBindableдирективу:

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

Просто щоб додати відповіді вище,

У мене були 2 звичайні кнопки, як показано нижче. (Ніде немає типу = "подати" ніде)

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

Я знаю, що пізно і мені відповіли, але я хотів би поділитися акуратними речами, які я зробив. Я створив ng-validate директиву, яка зачіплює підписку форми, тоді вона видає запобігання-за замовчуванням, якщо $ eval невірно:

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