Zatwierdzenie formularza AngularJS z izolowanym zakresem

Question

Chciałbym użyć wbudowanego sprawdzania formularza dostarczonego przez AngularJS. Jednak w formularzu używam dyrektyw niestandardowych, z których każdy ma zasięg izolowania. Z tego powodu element formularza nie ma dostępu do powiązanych wartości.

Każdy pomysł, jak to naprawić?

lub, czy można użyć sprawdzania poprawności AngularJS bez użycia formularza?

Wymagane dyrektywy ng-minlength i ng nie uruchamiają sprawdzania formularza.

<div ng-app="myApp" ng-controller="myCtrl"> 
    <form name="myForm" novalidate> 
     <do-something ng-model="variable"></do-something> 
     <h4 data-ng-if="myForm.myElement.$error.required">Please enter something</h4> 
     <h4 data-ng-if="myForm.myElement.$error.greaterThanOne">Please enter a value greater than 1</h4> 
     <h4 data-ng-if="myForm.myElement.$error.minLength">Please enter something longer than 1 digit</h4> 
    {{myForm.myElement.$error}}  
    </form> 
</div> 

var app = angular.module('myApp', []); 
app.controller('myCtrl', function ($scope) { 
}); 
app.directive('doSomething', function() { 
    return { 
     restrict: 'E', 
     require: '?ngModel', 
     scope: { 
      model: '=ngModel' 
     }, 
     template: 
      '<div>' + 
      ' <input name="myElement" ng-model="model" ng-required ng-minlength="1" />' + 
      '</div>' 
    } 
}); 

Pełna upadać można znaleźć tutaj: Oto plunkr który demonstruje problem: http://plnkr.co/edit/iWyvX2?p=preview

Answer 1

Z mojego zrozumienia, tak trzeba skorzystać z formularza do walidacji.

Sposób, w jaki mogę potwierdzić to, aby założyć dyrektywy jak poniżej

module.directive('ngDoSomething', function() { 
    restrict: 'A' 
    require: '?ngModel', 
    scope: { 
     model: '=ngModel' 
    } 
    link: function($scope, element, attrs, ngModel) { 
    $scope.$watch('model', function(val) { 
     ngModel.$setValidity('required', !!val); 
     ngModel.$setValidity('greaterThanOne', val > 1); 
    } 
}); 

Następnie użyj html

<form name="somethingForm"> 
    <input name="somethingElement" data-ng-do-something data-ng-model="variable" /> 
    <h4 data-ng-if="somethingForm.somethingElement.$error.required">Please enter something</h4> 
    <h4 data-ng-if="somethingForm.somethingElement.$error.greaterThanOne">Please enter a value greater than 1</h4> 
</form> 

Mam nadzieję, że to pomoże

Answer 2

Ok Daniel, byłem zaintrygowany więc przyjrzałem się temu nieco dalej. Główna różnica między Twoim kodem a użytkownikiem @3766487 polega na tym, że używasz elementu dyrektywy i szablonu do wstrzykiwania. Sądzę, że spowodowało to nieco niejednoznaczności (zobaczysz, że zarówno sama dyrektywa, jak i element wejściowy iniekcji mają ten sam atrybut nazwy). Wygląda na to, że powiązanie modelu również nie działa.

Zmieniłem kod, aby zastąpić szablon, co nieco uprościło sprawę. To wydaje się działać:

http://plnkr.co/edit/eTSbjNe4KXW9IbUKtKuG

Answer 3

NG-zatwierdzające będą działać z tym 2 zmiany:

(1) zmienić nazwę właściwości do "MINLENGTH" (zamiast "MINLENGTH"):

<h4 data-ng-if="myForm.myElement.$error.minlength"> 

(2) zestaw ng wymagane na "true":

<input name="myElement" ... ng-required="true"> 

Se tting minlength do "1" nic nie robi, ponieważ sprawdzanie poprawności formularza nie sprawdza minlength wen input jest pusty. Jeśli ustawisz MINLENGTH do „5” i wpisz jeden znak na wejściu, widać komunikat „Podaj coś dłużej niż 5 cyfrą”

http://plnkr.co/edit/porkuq5JcKDU89s8g8ZT?p=preview

Niestandardowy walidator „greaterThanOne” definiuje się na zrobienia - dyrektywa "coś". Można pokazać swoją wiadomość poprzez dodanie nazwy atrybutów, takich jak myElementContainer:

<do-something name="myElementContainer" ng-model="myElement"></do-something> 
    <h4 data-ng-show="myForm.myElementContainer.$error.greaterThanOne">Please enter a value greater than 1</h4> 

polecam zdefiniowanie logiki w innej dyrektywy jako atrybut do elementu wejściowego.

Ponadto, za pomocą $ zatwierdzające jest zalecany przez wywołanie $ setValidity: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController