I just started learning angular and encountered some problems in form validation. What I mean is that I want to display the error message when blurring, but not display the error message when focusing. But I followed the book I typed it, but it’s incorrect. Can anyone help me analyze it? Thank you~
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="../css/lib/bootstrap4.css">
<script type="text/javascript" src='../js/lib/angular.js' ></script>
<script type="text/javascript" src='js/validation2.js'></script>
</head>
<body ng-controller="myCtrl">
<form name='signup_form' novalidate ng-submit='signupForm()'>
<fieldset>
<legend>Signup</legend>
</fieldset>
<fieldset class="form-group">
<label>Your name</label>
<input type="text" class="form-control" placeholder='Name' name='name' ng-model='signup_name' ng-minlength='3' ng-maxlength='20' required ng-focus />
<p class="alert alert-danger" ng-show='signup_form.name.$dirty && signup_form.name.$invalid && !signup_form.name.$focused'>
<small class='error' ng-show='signup_form.name.$error.required'>Your name is required</small>
<small calss='error' ng-show='signup_form.name.$error.minlength'>Your name is required to be at least 3 words</small>
<small class='error' ng-show='signup_form.name.$error.maxlength'>Your name can't be longer than 20 words</small>
</p>
<pre>
focused:{{!signup_form.name.$focused}}
$dirty:{{signup_form.name.$dirty}}<br>
$invalid:{{signup_form.name.$invalid}}<br>
required:{{signup_form.name.$error.required}}<br>
minlength:{{signup_form.name.$error.minlength}}<br>
maxlength:{{signup_form.name.$error.maxlength}}
</pre>
</fieldset>
</form>
</body>
</html>js
var app = angular.module('app',[]);
app.controller('myCtrl', ['$scope','$timeout', function($scope,$timeout){
}])
app.directive('ngFocus',function(){
// var FOCUS_CLASS = "ng-focused";
return{
restrict : 'A',
require : 'ngModel',
link : function(scope,ele,attrs,ctrl){
ctrl.$focused = false;
ele.bind('focus',function(ev){
// ele.addClass(FOCUS_CLASS);
scope.$apply(function(){
ctrl.$focused = true;
});
}).bind('blur',function(ev){
// ele.removeClass(FOCUS_CLASS);
scope.$apply(function(){
ctrl.$focused = false
})
})
}
}
})
Like +0
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
