Я пытаюсь проверить следующую форму:
<div ng-controller="LoginController">
<form name="form" class="ng-pristine ng-valid" accept-charset="UTF-8" action="/sessions/login?locale=" method="post" novalidate>
{{ errorUsername }}
<input id="username" name="username" type="text" placeholder="EMAIL ADDRESS" ng-model="username" required>
{{ errorPassword }}
<input id="password" name="password" type="password" placeholder="PASSWORD" ng-model="password" required>
<p><input name="commit" value="LOGIN" ng-click="submitForm()" type="submit"></p>
</form>
</div>
В LoginController используется следующий метод:
$scope.submitForm = function() {
var is_valid = true;
if ( username.innerHTML == "" ) {
$scope.errorUsername = "Email required";
is_valid = false;
};
if ( password.innerHTML == "" ) {
$scope.errorPassword = "Password required";
is_valid = false;
};
if (! is_valid ) { $scope.form.submitted = true }
};
Представление формы входит в этот метод, и на секунду вы можете увидеть сообщения об ошибках. Но форма все еще подана.
Я должен добавить, что форма связана с контроллером рельсов. Но это не имеет значения, потому что мое намерение никогда не называть действие контроллера контроллера, если у формы есть ошибки.
Заранее спасибо.
Это так. Очевидно, вы не можете запретить отправку по умолчанию, если форма имеет атрибут действия:
Угловое препятствует действию по умолчанию (отправка формы на сервер), если у элемента не указан атрибут действия.
Итак, вы должны обмануть его, добавив код в форму:
<form name="login" class="ng-pristine ng-valid" accept-charset="UTF-8" action="/sessions/login?locale=" method="post" novalidate ng-submit="(submitted=true) && login.$invalid && $event.preventDefault()" ng-class="{true:'submitted'}[submitted]">
В основном мы использовали $ event.preventDefault(), чтобы остановить распространение предложения только в том случае, если форма недействительна; плюс мы устанавливаем переменную $ scope, представленную в true, чтобы иметь класс, который добавляется к форме, если форма была отправлена в недопустимом состоянии хотя бы один раз, даже если ни одно из ее полей не было "тронуто", поэтому его еще ng-нетронутый.
Решение найдено здесь: http://sandropaganotti.com/2014/03/01/angular-js-prevent-an-invalid-form-submission/
Вы можете попробовать с этим.
<form name="yourform" ng-submit="yourform.$valid && submitForm()"
Попробуйте заменить
<input name="commit" value="LOGIN" ng-click="submitForm()" type="submit">
в
<input name="commit" value="LOGIN" ng-click="submitForm()" type="button">
Все, что вам нужно, это написать return false;
$scope.submitForm = function() {
var is_valid = true;
if ( username.innerHTML == "" ) {
$scope.errorUsername = "Email required";
is_valid = false;
return false;
};
if ( password.innerHTML == "" ) {
$scope.errorPassword = "Password required";
is_valid = false;
return false;
};
if (! is_valid ) { $scope.form.submitted = true }
};