AngularJS 유효성 검사 오류

나는 ngMessages가있는 작업 양식이 있습니다.AngularJS 유효성 검사 오류

내 문제는 양식을 표시하고 비울 때 사용자가 입력을 집중했을 때만 오류를 표시하고 싶지 않다는 것입니다.

이것이 가능합니까?

2016-07-15 domoindal

'ngMessages'와 작동하면'ng-blur = function()'을 사용할 수 있습니다. – Sajal

사용 $touched :

발췌문 : 더보기 here를 들어

var app = angular.module('app', ['ngMessages']); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    // Any JS Code 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://code.angularjs.org/1.5.7/angular.js"></script> 
 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
    <script src="https://code.angularjs.org/1.4.7/angular-messages.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <form role="form" name="form" novalidate> 
 
    <div class="col-md-12"> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }"> 
 
     <label>Name</label> 
 
     <input type="email" name="email" class="form-control" placeholder="Name" ng-model="email" required> 
 
     <div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched"> 
 
      <p ng-message="required">This field is required</p> 
 
      <p ng-message="minlength">This field is too short</p> 
 
      <p ng-message="maxlength">This field is too long</p> 
 
      <p ng-message="required">This field is required</p> 
 
      <p ng-message="email">This needs to be a valid email</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

도움이 되었기를 바랍니다.

출처

2016-07-15 17:42:25 developer033

안녕하세요, 귀하의 솔루션과 매우 유사한 솔루션을 발견했습니다. 유일한 차이점은 $ dirty를 사용하는 것입니다. 그것은 내 의견으로는 더 나은 접근법이다. – domoindal

글쎄 .. 너는 말했다 : * "내 문제는 양식을 표시하고 비울 때, 사용자가 입력을 집중할 때만 오류를 표시하고 싶지 않다는 것입니다."*. 즉, 초점을 잃었을 때 오류 메시지를 ** 표시 **하기를 원하므로'$ dirty'는 사용자가 찾고있는 것이 아닙니다. '$ dirty'는 사용자가 ''에 무엇이든 입력하는 동일한 순간에 메시지를 표시하는 데 사용됩니다. 반면 '$ touched'는 사용자가 찾고있는 것을 수행합니다 (초점이 맞지 않는 경우에만 표시됩니다). – developer033

AngularJS 유효성 검사 오류

답변

관련 문제