AngularJS - запретить отправку формы, если она недействительна

Я создал отдельный случай моей проблемы: http://plnkr.co/edit/6LXW5TG76LC9LNSrdpQC

Вот код отдельного случая:

<!DOCTYPE html>
<html ng-app="App">

    <head></head>

    <body ng-controller="ExampleController">
    
    <form name="form" ng-submit="submit()" novalidate>
        <input type="number" name="number" ng-model="number" required><br>
        <span ng-show="form.number.$error.required && form.number.$touched">Required<br></span>
        <span ng-show="form.number.$error.number">Not a number<br></span>
        <input type="submit">
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    
    <script>
        
        var App = angular.module('App', []);
        
        App.controller('ExampleController', function($scope) {
        
        $scope.submit = function() {
            alert('send to server: ' + $scope.number);
        }
        
        });
        
        App.run();
        
    </script>
    </body>
</html>

По сути, пример содержит числовое поле, а под ним сообщения об ошибках, которые показывают, когда ввод недействителен (пустой или не является числом).

Но форма все равно будет отправлена, и хотя для значения поля установлено значение «не определено», если оно недействительно, я бы предпочел способ проверки правильности формы перед отправкой на сервер (окно предупреждения в этом примере).

Итак, мой вопрос: есть ли в AngularJS способ проверить, действительна ли форма из контроллера? Или другой способ предотвратить отправку формы, если она недействительна?


person rwacarter    schedule 17.01.2015    source источник


Ответы (3)


Лучше измените выражение ng-submit на

ng-submit="form.$valid && submit()"

Лучшее использование выражения директивы angular.

person Pankaj Parkar    schedule 17.01.2015
comment
мне нравится этот лучший, да мне нравится - person Northstrider; 26.06.2015
comment
@meffect чистый и аккуратный в самом пользовательском интерфейсе. Я использовал это почти во всех своих формах. - person Pankaj Parkar; 26.06.2015

http://plnkr.co/edit/kqLUJpjt0n0anJxzm6en?p=preview

что вам нужно, это

if ($scope.form.$valid) {
    //submit to server
}

где form имя формы

<form name="form"...
person Arūnas Smaliukas    schedule 17.01.2015

Вы можете попробовать с директивой ng-disabled

      <button type="submit" ng-disabled='number==null'>Submit</button>

Таким образом, вы можете избежать добавления дополнительного кода

person kinetix    schedule 17.01.2015