AngularJS 지시적 워치 유효성

AngularJS 지시적 워치 유효성

입력 필드가 비활성화된 경우 몇 가지 작업을 수행할 지시문을 작성하려고 합니다.이 예에서는 입력이 소수인지 여부를 확인하는 디렉티브가 있다고 가정하고 비활성일 때 엘리먼트에 클래스를 추가하는 디렉티브를 만듭니다.

<input type="text" ng-model="primeNumber" validate-prime invalid-add-class="error">

validate-prime은 ng-model의 파서와 포맷터를 사용하여 모델의 유효성을 업데이트합니다.

이제 모델이 비활성화되면 invalid-add-class 지시문이 클래스 "error"를 추가하고 모델이 비활성화되면 제거합니다.즉, 모델 컨트롤러의 $valid(또는 $valid) 속성을 감시해야 합니다.하지만 어떻게 해야 할지 모르겠어요.나는 시도했다.

link : function(scope, element, attrs, ctrl) {
    ctrl.$watch("$valid", function(newVal, oldVal) {
    //never fired
    });
}

스코프에서 변수를 관찰할 수는 있지만 어떤 변수를 관찰해야 할지 모르겠습니다.

그럼 모델의 유효성이 변경되었을 때 어떻게 통지받을 수 있을까요?

를 가지고 있는 경우<form>, 를 추가합니다.name('myForm'이라고 가정하자) 및 a.name입력에 따라 (전제로 합니다)myInput)는, 다음의 조작할 수 있어야 합니다.$watch이 기준:

scope.$watch('myForm.myInput.$valid', function(validity) {})

이 없는 경우form, 언제든지 기능을 시청할 수 있습니다.이쪽:

scope.$watch(function() { return ctrl.$valid; }, function(validity){});

폼 접근법에 대한 자세한 내용은 여기를 참조하십시오.

를 가지고 있지 않은 경우<form />쉽게 구할 수 있습니다.

지시적 정의:

require: '^form'

다음으로 링크 함수에서 폼은 네 번째 파라미터로 전달됩니다.

    link: function (scope, element, attr, ctrl) {

이제 $watch를 수행하기 위해 폼이나 입력 필드를 하드 코드화할 필요가 없습니다.

 scope.$watch(ctrl.$name + '.' + element.attr('name') + '.$valid', 
 function (validity) {}); 

일반적으로 우리의 목표는 어떤 형태나 입력에도 독립적으로 지시를 실행하는 것입니다.어떻게 하면 로컬을 읽을 수 있을까요?$valid하나의 특정 양식 및 입력 이름으로 강제적으로 구속되지 않는 속성

그냥 사용하다require: 'ngModel'명령어 설정 속성 중 하나로 지정합니다.그러면 로컬 ngModel 컨트롤러가 링크 함수의 네 번째 인수로 삽입됩니다.이것에 의해,$watch에 직접$valid특정 형식이나 입력에 지침의 이행을 결합할 필요가 없습니다.

require: 'ngModel',
link: function postLink(scope, element, attrs, controller) {
    scope.inputCtrl = controller;
    scope.$watch('inputCtrl.$valid', handlerFunc)
}

핸들러는 $valid에 대한 변경이 있을 때 항상 실행됩니다.이 바이올린을 참조해 주세요.미국 Zip-Code 또는 Zip+4 패턴에 대한 입력이 검증됩니다.유효성이 변경될 때마다 경고가 표시됩니다.

2014년 3월 21일 편집:이 글은 이전에 구현 문제의 잘못된 원인에 집착하며 나의 망상에 매달렸다.제 잘못이에요.위의 예에서는 이러한 고정 장치를 제거합니다.또, 바이올린을 추가해, 이 어프로치가 실제로 기능하고 있는 것을 나타냅니다.워치 표현에 따옴표를 붙이면, 항상 기능합니다.

언급URL : https://stackoverflow.com/questions/15899389/angularjs-directive-watch-validity