问题描述
本人刚开始学习angular，在表单验证这里碰到了一些问题，我的意思是想在blur的时候再让错误提示显示出来，而在focus时不显示错误信息，可是我按照书上的来打，但是不正确，有谁能帮我分析下，谢谢~
<!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='https://www.6hehe.com/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' placeholder=’Name’ name=’name’ ng-model=’signup_name’ ng-minlength=’3’ ng-maxlength=’20’ required ng-focus /><p 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}) })} }})
问题解答
回答1：<input type='text' placeholder=’Name’ name=’name’ ng-model=’signup_name’ ng-minlength=’3’ ng-maxlength=’20’ required validate-on-blur />
app.directive(’validateOnBlur’, function () { return { require: ’ngModel’, link: function (scope, elem, attrs, ctrl) {var allowTypes = [’text’, ’email’, ’password’];if (allowTypes.indexOf(attrs.type) === -1) { return;} ctrl.$focused = false; elem.bind(’focus’, function () { elem.addClass(’ng-focused’); scope.$apply(function () { if(!ctrl.$focused){ ctrl.$focused = true; } });}); elem.bind(’blur’, function () { elem.removeClass(’ng-focused’); scope.$apply(function () { ctrl.$setViewValue(elem.val()); ctrl.$focused = false; });}); } }})
