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, есть ли способ проверить, является ли форма действительной из контроллера? Или другой способ предотвратить отправку формы, если она недействительна?

Источник

3 ответа

Решение

Лучше сделать изменения в ng-submit выражение для

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

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

Источник

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

что тебе нужно

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

где form is form name

<form name="form"...
Источник

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

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

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

Источник
Другие вопросы по тегам