Проблема проверки формы Angularjs 1 - PullRequest
Новая
       9

Проблема проверки формы Angularjs 1

0 голосов
/ 04 сентября 2018

Я использую Angularjs 1 в своем проекте. Я проверяю форму внутри angular, поэтому я использую форму . $ Valid , чтобы проверить, что отправленная форма действительна или нет, но она не работает должным образом , не уверен, что мне не хватает 

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
     <meta charset="utf-8" />
     <title> Learning AngularJS Filters </title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
     <script>
         "use strict";
         angular.module("myApp",[]);
         angular.module("myApp").controller("SampleController",[function(){
               this.user = {}
               this.submitForm = function(form){
                    if(form.$valid){
                        window.alert("Valid")
                    }else{
                        window.alert("In Valid");
                    }
               }
         }]);
     </script>
  </head>
  <body>
     <div ng-controller="SampleController as sm" class="container">
        <form name="sampleForm" novalidate>
            <div class="form-group">
                <label for="exampleInputEmail1"> Username </label>
                <input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1"  placeholder="Enter Username" required>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
            </div>
            <button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
            <p> {{ sm.user }} </p>
        </form>
     </div> <!--/ container -->
  </body>
</html>

Я всегда получаю предупреждающее сообщение из другой части, в котором указано, что форма недействительна

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Вы передаете форму в виде строки в методе ng-click, а не в форме объекта. Вам необходимо передать объект формы без однократных символов. 

 ng-click="sm.submitForm('sampleForm')" to ng-click="sm.submitForm(sampleForm)"
0 голосов
/ 04 сентября 2018

Директива формы ограничена областью действия, поэтому вам нужно записать ее как $scope.sampleForm.$valid. Поскольку ваше имя является динамическим, вы можете использовать скобки: $scope[form].$valid. Но в любом случае вам нужно ввести $ scope в ваш контроллер.

Вот демоверсия: 

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

<head>
  <meta charset="utf-8" />
  <title> Learning AngularJS Filters </title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <script>
    "use strict";
    angular.module("myApp", []);
    angular.module("myApp").controller("SampleController", ['$scope', function($scope) {
      this.user = {}
      this.submitForm = function(form) {
        if ($scope[form].$valid) {
          window.alert("Valid")
        } else {
          window.alert("In Valid");
        }
      }
    }]);
  </script>
</head>

<body>
  <div ng-controller="SampleController as sm" class="container">
    <form name="sampleForm" novalidate>
      <div class="form-group">
        <label for="exampleInputEmail1"> Username </label>
        <input type="text" class="form-control" ng-model="sm.user.name" id="exampleInputEmail1" placeholder="Enter Username" required>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" ng-model="sm.user.pwd" id="exampleInputPassword1" placeholder="Password" required>
      </div>
      <button type="submit" ng-click="sm.submitForm('sampleForm')" class="btn btn-primary">Submit</button>
      <p> {{ sm.user }} </p>
    </form>
  </div>
  <!--/ container -->
</body>

</html>
...