Saya baru mula belajar sudut dan menghadapi beberapa masalah dalam pengesahan borang Apa yang saya maksudkan ialah saya ingin memaparkan mesej ralat apabila mengaburkan, tetapi tidak memaparkan mesej ralat semasa memfokuskan, tetapi ia tidak betul. Bolehkah sesiapa membantu saya menganalisisnya. Terima kasih~
<!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
})
})
}
}
})
Suka +0
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
