Как предотвратить отправку формы в Angularjs, если я отправляю форму, используя клавишу ввода?

0

Я применил валидацию к моей форме (у нее есть только два поля), но не знаю, как предотвратить ее отправку. Текущий поток: после нажатия клавиши ввода имя и метки ученика добавляются в localstorage и отображаются на экране с там, но я не могу предотвратить отправку пустых данных.

Это мои js-функции:

$scope.searchEnter = function() {
    if (event.which == 13 && $scope.student != "") {
        $scope.addStudent();
    }
};
$scope.addStudent = function() {
    if ($scope.marks > 65) {
        var pass = true;
    } else {
        pass = false;
    }
    $scope.students.push({ 'studentName': $scope.student, 'Marks': parseInt($scope.marks), 'pass': pass });
    $scope.student = '';
    $scope.marks = '';
    localStorage['studentsList'] = JSON.stringify($scope.students);

};

Это часть html:

 <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal" novalidate name="studentForm" >
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="student_name">Student Name</label>
                    <div class="col-sm-5">
                    <input ng-model="student" ng-keyup="searchEnter()" type="text" class="form-control" id="student_name" ng-required="true" name="stdname">
                        <div ng-show="studentForm.stdname.$touched && studentForm.stdname.$invalid">
                            <small style="color:red; display:block;">Enter a valid name </small>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label" for="student_marks">Marks obtained</label>
                    <div class="col-sm-5">
                    <input ng-model="marks" ng-keyup="searchEnter()" type="number" class="form-control" id="student_marks" ng-required="true">Press ENTER to insert student data in the table.</div>
                </div>
            </form>
        </div>
    </div>
  • 0
    удалить type="submit"
  • 0
    Он хочет помешать отправке пустых данных ..
Показать ещё 1 комментарий
Теги:
forms

1 ответ

1
Лучший ответ

Предположив, что ваши поля правильно проверки, чтобы предотвратить submit, вы можете использовать ngDisabled директиву, как показано ниже:

<button type="submit" ng-disabled="form.$invalid">Submit</button>

EDIT: Поскольку OP предоставил полный код, я смог дать правильный ответ, то есть:

Измените чек на:

if (event.which == 13 && $scope.student && $scope.marks) {

Фрагмент работает на основе вашего code:

(function() {
  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];
  
  function MainCtrl($scope) {
    $scope.students = [];

    $scope.searchEnter = function() {
      if (event.which == 13 && $scope.student && $scope.marks) {
        $scope.addStudent();
      }
    };

    $scope.addStudent = function() {
      console.log('addStudent called');
      $scope.students.push({
        'studentName': $scope.student,
        'Marks': $scope.marks,
        'pass': $scope.marks > 65
      });
      $scope.student = '';
      $scope.marks = '';
      localStorage['studentsList'] = JSON.stringify($scope.students);
    };
  }
})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body ng-controller="MainCtrl">
  <div class="row">
    <div class="col-xs-12">
      <form class="form-horizontal" novalidate name="studentForm">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="student_name">Student Name</label>
          <div class="col-sm-5">
            <input ng-model="student" ng-keyup="searchEnter()" type="text" class="form-control" id="student_name" ng-required="true" name="stdname">
            <div ng-show="studentForm.stdname.$touched && studentForm.stdname.$invalid">
              <small style="color:red; display:block;">Enter a valid name </small>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label class="col-sm-2 control-label" for="student_marks">Marks obtained</label>
          <div class="col-sm-5">
            <input ng-model="marks" ng-keyup="searchEnter()" type="number" class="form-control" id="student_marks" ng-required="true">Press ENTER to insert student data in the table.</div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

Советы:

  1. Значения ngModel $scope.marks уже являются числом, вам не нужно выполнять какой-либо parse, так что вы можете иметь 'Marks': $scope.marks.

  2. Проверка pass может быть просто уменьшена до: 'pass': $scope.marks > 65

Поделиться
  • 0
    Я не использую никакие кнопки, данные отправляются в локальное хранилище после нажатия Enter.
  • 0
    Таким образом, вы должны опубликовать свой полный код, чтобы получить полную помощь ..
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню