Question

我在我的项目中使用Angularjs1。我正在验证angular中的表单，因此我正在使用 form。$ 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>

我总是从其他部分收到警告消息，指出状态无效

Answer 1

Form指令受范围限制，因此您需要将其编写为$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>

Answer 2

您是在ng-click方法中以字符串形式传递表单，而不是表单对象。因此，您必须传递没有Single-cotts的表单对象。

 ng-click="sm.submitForm('sampleForm')" to ng-click="sm.submitForm(sampleForm)"

AngularJS 1表单验证问题

2 个答案: