Страница была загружена после проверки формы, функция ng-click не работает

Question

Я новичок в angularjs.Я проверяю форму при запуске функции сохранения.

Я поместил свой элемент управления внутри формы и назвал его myform .

Я использую ng-required="true" в текстовых полях Имя и Пароль.

Вng-click кнопки Сохранить , я вызываю функцию save()

<div ng-app="myApp" ng-controller="myControl">
    <form name="myForm" novalidate>
    <table>
        <tr>
            <td>
                Name
            </td>
            <td>
                <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name"
                    ng-model="Name" ng-required="true">
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <input type="password" class="form-control" id="txtPassword" placeholder="Password"
                    ng-required="true" name="Password" ng-model="Password">
            </td>
        </tr>
        <tr>
            <td>
                Email
            </td>
            <td>
                <input type="email" class="form-control" id="Email" placeholder="Email" name="Email"
                    ng-model="Email">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <button ng-click="save()"> Save </button>
            </td>
        </tr>
    </table>
    </form>
  </div>

В функции save() я проверяю форму и помещаю предупреждение о том, что формадействительный или недействительный.

<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myControl", function ($scope, $http) {
        $scope.save = function () {
            if ($scope.myForm.$valid) {
                alert('Valid');
            } else {
                alert('Invalid');
            }
        };
    });
</script>

Теперь он будет вызывать сообщение проверки

После ввода имени и пароля и отправки формы страница загружена, но нене вызвать предупреждающее сообщение.

Answer 1

Вот что вы должны сделать

<form ng-submit="myForm.$valid && save()" name="myForm">
    <button type="submit">Submit</button>
</form>

Этот простой фрагмент ng-submit="myForm.$valid && save()" не будет вызывать save, если форма недействительна.И это угловой путь - держите все проверки отдельно от бизнес-логики.save метод должен выполняться, только если все данные формы верны.

Существует много базовых директив проверки правильности ввода: minlength, maxlength, required, pattern and etc..AngularJS обладает отличным механизмом, который позволяет вам создавать свою собственную проверку ( Здесь - отличная статья о том, как реализовать пользовательскую проверку для входных данных, на всякий случай).

Answer 2

Я собираюсь предположить, что он пытается вызвать действие формы, что является ничем, поэтому он перезагрузит страницу.Вы можете использовать ng-submit , что предотвратит действие по умолчанию.

var app = angular.module("myApp", []);
app.controller("myControl", function($scope, $http) {
  $scope.save = function() {
    if ($scope.myForm.$valid) {
      alert('Valid');
    } else {
      alert('Invalid');
    }
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myControl">
  <form name="myForm" novalidate ng-submit="save()">
    <table>
      <tr>
        <td>
          Name
        </td>
        <td>
          <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true">
        </td>
      </tr>
      <tr>
        <td>
          Password
        </td>
        <td>
          <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password">
        </td>
      </tr>
      <tr>
        <td>
          Email
        </td>
        <td>
          <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email">
        </td>
      </tr>
      <tr>
        <td colspan="2" align="right">
          <button type="submit"> Save </button>
        </td>
      </tr>
    </table>
  </form>
</div>

Или, если вы действительно хотите сохранить ng-click, вы можете передать событие в методе сохранения и предотвратить его там

var app = angular.module("myApp", []);
app.controller("myControl", function($scope, $http) {
  $scope.save = function(e) {
  e.preventDefault()
    if ($scope.myForm.$valid) {
      alert('Valid');
    } else {
      alert('Invalid');
    }
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myControl">
  <form name="myForm" novalidate>
    <table>
      <tr>
        <td>
          Name
        </td>
        <td>
          <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true">
        </td>
      </tr>
      <tr>
        <td>
          Password
        </td>
        <td>
          <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password">
        </td>
      </tr>
      <tr>
        <td>
          Email
        </td>
        <td>
          <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email">
        </td>
      </tr>
      <tr>
        <td colspan="2" align="right">
          <button type="submit" ng-click="save($event)"> Save </button>
        </td>
      </tr>
    </table>
  </form>
</div>