Angularjs는 지시문 내부의 양식 필드 유효성을 가져옵니다.

Angularjs는 지시문 내부의 양식 필드 유효성을 가져옵니다.

저는 이것이 중복되지 않기를 바랍니다 - 에 대한 비슷한 질문들이 많이 있지만 효과가 있는 답을 찾을 수 없습니다.

나는 각진 지시가 있어서, 다음과 같습니다.

app.directive('emailInput', function(){
    return {
        restrict: 'E',
        templateUrl: 'template.html',
        link: function(scope, elem, attrs, ctrl){
            elem.bind('keyup', function(){
                // TODO - what?
            })
        }
    }
}

템플릿 html에서 다음을 입력합니다.

<input type="email" required ng-model="emailAddress" />

양식의 이름을 모른 채 내부에link기능, 나는 그것의 가치를 알고 싶습니다.emailAddress.$valid부동산 - 이걸 어떻게 얻나요?

양식 컨트롤러를 요구하면 양식에 등록된 모든 입력에 액세스할 수 있습니다.

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.emailAddress.$valid //check validity
          })
      }
  }
}

Angular는 이름으로 입력 요소를 추적합니다.그래서 당신은 당신의 입력에 이름 속성을 부여해야 합니다.

<input type="email" required ng-model="emailAddress" name="emailAddress" />

또한 이 모든 것을 지시적 속성을 통해 전달하는 것을 권장합니다.필드 이름을 하드 코드화하고 싶지 않을 수도 있습니다.그래서 당신은 단지 유효성을 가지는 속성을 가질 수 있습니다.

inputIsValid='formName.emailAddress.$valid'

또한 지침에 따라 평가(또는 $watch it)합니다.

입력 요소의 이름을 모르더라도 좀 더 쉽게 유효성을 확인할 수 있습니다.

app.directive('emailInput', function(){
  return {
      require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM.
      restrict: 'E',
      templateUrl: 'template.html',
      link: function(scope, elem, attrs, ctrl){
          elem.bind('keyup', function(){
              ctrl.$valid //check validity here
          })
      }
  }
}

이것은 오래된 게시물이지만 구글링을 통해 여기에 도착하는 사람들에게는 이것이 이름을 모르는 상태에서 지시문의 입력의 유효성을 확인하는 가장 깨끗한 방법이므로 모든 입력 요소에서 지시문을 사용할 수 있습니다.

당신은 단지 당신이 필요로 하는 것은ngModel컨트롤러:

app.directive('emailInput', function(){
  return {
    require: 'ngModel'
    restrict: 'E',
    templateUrl: 'template.html',
    link: function(scope, elem, attrs, ngModelCtrl){
      elem.bind('keyup', function(){
          ngModelCtrl.$valid //check validity
      })
    }
  }
}

각선 보기ngModel에 대한 JS 문서.NgModel 컨트롤러,$valid속성 섹션 아래에 있습니다.

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

오래된 스레드라는 것을 알고 있지만 누군가 이 문제에 부딪히면 다음과 같이 해결했습니다.

app.directive('emailInput', function(){
  return {
      restrict: 'E',
      templateUrl: 'template.html',
      controller:function($scope){
         $scope.isInvalid = function(){
            return $scope.myelem.data().$ngModelController.$invalid;
         }
      },
      link: function(scope, elem, attrs){
          $scope.myelem = $(elem).find("input");
      }
  }
}

입력한 내용이 없더라도 더럽게 참으로 설정하는 지침이 있습니다.

기본적으로 $dirty는 무언가를 입력하면 설정되며, 사용자가 제출할 때까지 필요한 오류 메시지가 표시되지 않습니다.이와 함께.

function() {
    return function (scope, element, attrs) {
        $(element).blur(function () {
            scope.$apply(function() {
                var field = scope.$eval(attrs.makeDirty);
                field.$dirty = true;
            });
        });
    };

HTML:

<label class="fieldLabel" for="confirmEmail">Confirm Email*</label>
<input type="text" id="confirmEmail" name="confirmEmail" ng-model="confirmEmail" ng-pattern="{{Ctrl.Model.Email.EmailAddress}}" required make-dirty="form.confirmEmail">
<span class="error" ng-show="form.confirmEmail.$error.pattern && form.confirmEmail.$dirty">Emails must match</span>
<span class="error" ng-show="form.confirmEmail.$error.required && (form.$submitted || form.confirmEmail.$dirty)">Confirm your email</span>

그것은 사용자가 양식을 작성하거나 탭할 때 피드백을 줄 수 있게 해줍니다.

다른 방법을 알려드리겠습니다. 어떤 경우에는 유용할 수 있습니다.

link: function (scope, element, attrs, formCtrl) {
    scope.fileSizeError=false;
    scope.$watch(function () {
               return formCtrl.fileP.$error.maxSize;
             },function(newValue) {
                scope.fileSizeError=newValue;
             });          
}

제 경우에는 파일 업로드에 사용되는 지시문 안에 있었기 때문에 템플릿의 var $error.maxSize의 상태를 알아야 했기 때문에 그렇게 했습니다.

언급URL : https://stackoverflow.com/questions/19414085/angularjs-get-form-field-validity-inside-directive