요소의 여러 지시문이 작동하지 않습니다.

두 개의 지시문 (특성)이있는 입력 요소가 있습니다. 입력이 유효하지 않은 경우 오류 클래스를 추가합니다.요소의 여러 지시문이 작동하지 않습니다.

<input required alpha type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" />

이러한 내 지시

// SHOWS AN ERROR IF THE INPUT IS EMPTY 
directives.required = function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      elem.on('keyup', function(event) { 
       if(elem.val().trim() == '') { 
        elem.prop('title', 'This input is required!'); 
        elem.addClass('error'); 
       } else { 
        elem.prop('title', ''); 
        elem.removeClass('error'); 
       } 
      }) 
     } 
    } 
}; 

// SHOWS AN ERROR IF THE INPUT CONTAINS NON ALPHA CHARACTERS 
directives.alpha = function() { 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs) { 
      var regexp = /^[A-Za-z ñÑ]+$/; 
      var char; 
      elem.on('keyup', function(event) { 
       if(!regexp.test(elem.val())) { 
        elem.prop('title', 'This input can contain letters only!'); 
        elem.addClass('error'); 
       } else { 
        elem.prop('title', ''); 
        elem.removeClass('error'); 
       } 
      }) 
     } 
    } 
};

있습니다하지만 내가 무엇을 기대 할 didnt는. 하나의 지시문 만 작동합니다! 속성 알파을 제거하려고 시도했을 때 이 필요합니다. 이제이 작동합니다. 누군가가 왜 이렇게 작동하는지 말해 줄 수 있습니까? 당신이 내장 된 지침과 컨트롤러 기능을 달성 할 수 원하는 것은

출처

2014-10-01 boi_echos

당신이 알파 지시어에 예를 들어, "오류"클래스 이름을 변경 시도 해 봤나 : 나는 이것을 피하기 위해 추가 조건을 추가? alpha 지시어가 필수 지시어 또는 viceversa의 "error"클래스를 덮어 쓰는 것일 수 있습니다. – Ragnar

왜 작동하지 않는지 알지 못합니다.하지만 여기서는 바퀴를 다시 만들고 있습니다. 내장 입력 지시문과 내장 된 ngModelController/formController를 더 자세히 살펴보십시오. – gkalpak

유효성 검사를 통과 한 경우와 실패한 경우에 지침의 'keyup'처리기가 서로 충돌하지 않습니까? – pdoherty926

서로 겹쳐 쓰므로 서로 작동하지 않습니다.

<!doctype html> 
 
<html> 
 
    <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script> 
 
    </head> 
 
    <body ng-app="plunker"> 
 
     <div ng-controller="MainCtrl"> 
 
      <input required="" alpha="" type="text" name="firstName" ng-model="newUser.firstName" class="form-control" maxlength="30" placeholder="First Name" /> 
 
     </div> 
 
     <script> 
 
      var app = angular.module('plunker', []); 
 
      app.controller('MainCtrl', ['$scope', function($scope) { 
 

 
      }]).directive('required', function() { 
 
       return { 
 
        restrict: 'A', 
 
        link: function(scope, elem, attrs) { 
 
         elem.on('keyup', function(event) { 
 
          var title = 'This input is required!'; 
 
          if(elem.val().trim() == '') { 
 
           elem.prop('title', 'This input is required!'); 
 
           elem.addClass('error'); 
 
          } else if (elem.prop('title') == title) { 
 
           elem.prop('title', ''); 
 
           elem.removeClass('error'); 
 
          } 
 
         }) 
 
        } 
 
       } 
 
      }).directive('alpha', function() { 
 
       return { 
 
        restrict: 'A', 
 
        link: function(scope, elem, attrs) { 
 
         var regexp = /^[A-Za-z]*$/; 
 
         var char; 
 
         elem.on('keyup', function(event) { 
 
          var title = 'This input can contain letters only!'; 
 
          if(!regexp.test(elem.val())) { 
 
           elem.prop('title', title); 
 
           elem.addClass('error'); 
 
          } else if (elem.prop('title') == title) { 
 
           elem.prop('title', ''); 
 
           elem.removeClass('error'); 
 
          } 
 
         }) 
 
        } 
 
       } 
 
      }); 
 
     </script> 
 
    </body> 
 
</html>

출처

2014-10-02 00:07:15

<!-- HTML --> 
<input type="text" name="firstName" placeholder="First name" ng-model="someProp" 
     ng-pattern="/^[A-Za-z ñÑ]*$/" ng-required="true" 
     title="{{form1.firstName.$error.pattern?'Should only contain letters': 
       form1.firstName.$error.required?'This field is required':''}}" /> 

/* CSS */ 
input.ng-invalid-pattern, 
input.ng-invalid-required { 
    /* Put the styles for your .error class here */ 
}

참조, 또한,이 short demo.

출처

2014-10-02 00:07:04 gkalpak

아아 그래. 나는 전에 그와 비슷한 것을 시도해 보았지만, 한 요소 내에서 너무 많은 각도 조건을 없애기를 원합니다. –

@AlexCoroza : 당신이'title' 표현식을 참조한다고 가정합니다 (왜냐하면 조건은 당신의 예제와 동일하기 때문입니다). 이를 위해 유효성에 따라 제목을 설정하는 지시문을 만들 수 있습니다 (오류 클래스를 설정할 필요가 없으므로 오류 클래스를 처리 할 필요가 없습니다.) 또는 ('title'을 변경하는 대신) 대개 일부 오류 메시지를 표시하는 것이 더 좋습니다 (ngMessages도 살펴보십시오). – gkalpak

요소의 여러 지시문이 작동하지 않습니다.

답변

관련 문제