我编写了以下代码来执行输入字段的验证。在这里，我通过函数将输入字段的状态从 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 传递它们()函数？
最佳答案
所有表单直接绑定(bind)到$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同样的
关于javascript - 如何在不从 html 传递的情况下获取 angularjs 脚本中的表单和输入字段的状态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46336393/