recherche

Maison  >  Questions et réponses  >  le corps du texte

angulaire.js - Validation de formulaire angulaire

Je viens de commencer à apprendre Angular et j'ai rencontré quelques problèmes de validation de formulaire. Ce que je veux dire, c'est que je veux afficher le message d'erreur lors du flou, mais pas afficher le message d'erreur lors de la mise au point. Mais j'ai suivi le livre que je l'ai tapé, mais. c'est incorrect. Quelqu'un peut-il m'aider à l'analyser ? Merci~

<!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
                })
            })
        }
    }
})
给我你的怀抱给我你的怀抱2868 Il y a quelques jours616

répondre à tous(1)je répondrai

  • 某草草

    某草草2017-05-15 17:00:38

    <input type="text" class="form-control" 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;
          });
        });
      }
    }
})

    répondre
    0
  • Annulerrépondre