我目前正在阅读关于AngularJS的这本书,但是即使在我从书中输出示例编码之后我仍然无法理解,我仍然无法理解这一部分。我错过了什么吗?
标题是关于使用简单验证和推迟反馈,但不知何故它不起作用。
我做了一些测试来尝试正在发生的事情,如果我没有错,那么控制器内的addUser方法即使在phpStorm中也找不到myForm变量,它表示Unresolved变量。
但我几次检查了这本书的例子,我并没有把变量写错。
在最底层,我使用内联绑定调用$scope.showValidation
<!DOCTYPE html>
<html ng-app="exampleApp">
<head>
<title>Forms</title>
<script src="angular.js"></script>
<link href="bootstrap.css" rel="stylesheet"/>
<link href="bootstrap-theme.css" rel="stylesheet"/>
<script>
angular.module("exampleApp", [])
.controller("defaultCtrl", function ($scope) {
$scope.addUser = function (userDetails) {
if(myForm.$valid){
$scope.message = "(" + userDetails.email + ")";
$scope.showValidation = false;
}else{
$scope.showValidation = true;
}
};
$scope.message = "Ready";
$scope.getError = function(error){
if (angular.isDefined(error)){
if(error.required){
return "Please enter a value";
}else if(error.email){
return "Please enter a valid email address";
}
}
};
});
</script>
<style>
form.validate .ng-invalid-required.ng-dirty { background-color: lightpink; }
form.validate .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; }
div.error {color: red; font-weight: bold;}
</style>
</head>
<body>
<div id="todoPanel" class="panel" ng-controller="defaultCtrl">
<form name="myForm" novalidate ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''">
<div class="well">
<div class="form-group">
<label>Email:</label>
<input name="userEmail" type="email" class="form-control"
required ng-model="newUser.email">
<div class="error" ng-show="showValidation">
{{getError(myForm.userEmail.$error)}}
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">OK</button>
</div>
</form>
<div class="well">
{{message}}<br>
{{myForm.$valid}}<br>
{{showValidation}}<br>
</div>
</div>
</body>
</html>