Question

我编写了以下用于执行输入字段验证的代码。在这里，我通过函数将输入字段的状态从HTML传递到脚本。但是我需要在不传递任何参数的情况下调用函数，并且应该直接在脚本中获取值而不从HTML传递。

HTML部分：

<form ng-submit="LoginButton(LoginForm.$valid)" novalidate="novalidate" name="LoginForm">
  <div class="row">
    <div class="input-field col s12 center-align">
      <input id="username" type="text" ng-model="username" name="username" required>
      <label for="username">User Name</label>
      <span style="color:red;font-size:small" class="help-block" ng-show="FieldRequiredFunc(LoginForm.username.$error.required,LoginForm.username.$pristine,submitted)"
        ng-bind="FieldRequired"></span>
    </div>
  </div>

  <div class="row">
    <div class="input-field col s12 center-align">
      <input id="password" type="password" ng-model="password" name="password" required>
      <label for="password">Password</label>
      <span style="color:red; font-size:small" class="help-block" ng-show="FieldRequiredFunc(LoginForm.password.$error.required,LoginForm.password.$pristine,submitted)"
        ng-bind="FieldRequired"></span>

    </div>
  </div>

  <div class="row">
    <div class="col s12 center-align">
      <button class="custom-btn" id="Submitbtn" type="submit" name="action">Login</button>
    </div>
  </div>
</form>

脚本部分：

 loginModule.controller("loginViewModel", function($scope) {
   $scope.submitted = false;
   $scope.FieldRequired = "This Field is Required";
   $scope.LoginButton = function(valid) {
     $scope.submitted = true;
   }
   $scope.FieldRequiredFunc = function(cond1, cond2, submitted) {
     if (cond1 && (!cond2 || submitted))
       return true;
     else
       return false;
   }
   $scope.AllFieldRequiredFunc = function(valid, submitted) {
     if (!valid && submitted)
       return true;
     else
       return false;
   }
 });

我的问题是如何从html中获取脚本中的LoginForm.username.$error.required, LoginForm.username.$pristine,..值，而不通过FieldRequiredFunc()函数传递它们？

Answer 1

所有表单都直接绑定到$scope。所以你可以通过

轻松访问

"$scope.LoginForm.username.$error.required, LoginForm.username.$pristine,..

// Code goes here

var app = angular.module('myApp', []);

app.controller('mainCtrl', ['$scope', function($scope) {

  $scope.LoginButton = function() {
    console.log("is username valid" + ": " +      $scope.LoginForm.username.$valid);
  };

}]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="style.css">
  <title>Angular 1.x Application Using ng-form</title>

</head>

<body ng-controller="mainCtrl" ng-cloak>
  <form ng-submit="LoginButton()" name="LoginForm">
    <div class="row">
      <div class="input-field col s12 center-align">
        <input id="username" type="text" ng-model="name" name="username" required>
        <label for="username">User Name</label>
      </div>
    </div>
<br>
    <div class="row">
      <div class="input-field col s12 center-align">
        <input id="password" type="password" ng-model="password" name="password" required>
        <label for="password">Password</label> 
      </div>
    </div>
<br>
    <div class="row">
      <div class="col s12 center-align">
        <button class="custom-btn" type="submit">Login</button>
      </div>
    </div>
  </form>

  <!--scripts-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
</body>

</html>

Plunker用于相同的

如何获取angularjs脚本中的表单和输入字段的状态而不从html传递它们？

1 个答案: