Konfigurowanie wielu formularzy/sprawdzanie poprawności na tej samej stronie

Question

Co jest w tym wszystkim, totalnego nokautu AngularJS tutaj i szukania odpowiedzi.

Mam stronę skonfigurować tak:

<form name="mainForm" class="content" ng-app="pathForm" ng-controller="FormControl" novalidate> 

    <div class="full-page open" id="form1"> 
    <!-- Form 1 content here --> 
    </div> 

    <div class="full-page" id="form2"> 
    <!-- Form 2 content here --> 
    </div> 

    <div class="full-page" id="form3"> 
    <!-- Form 3 content here --> 
    </div> 

    <div class="full-page" id="form4"> 
    <!-- Form 4 content here --> 
    </div> 

</form> 

gdzie każda z tych form ma swój własny zestaw wejść, które wymagają walidacji. Udało mi się uzyskać walidację działającą we wszystkich czterech formach, ponieważ przygotowałem obszerną aplikację ng, która obejmuje wszystkie 4 formularze. Po przesłaniu skrypt usuwa klasę "otwartą" z formularza otwartego, przechodzi do formularza enxt i dodaje klasę otwartą w tym formularzu.

Jak ustawić tak, aby każdy z tych formularzy mógł być indywidualnie sprawdzany?

Z góry dziękuję.

Answer 1

Potrzebujesz ngForm directive i FormController.

Każda dyrektywa w formie ng z nazwą w niniejszej dyrektywie dodaje właściwość do $scope. Możesz uzyskać dostęp do tej właściwości (jest to obiekt, instancja FormController) w funkcji wywoływanej przez kliknięcie przycisku Wyślij.

Istnieje kilka właściwości i metod w tym obiekcie. Aby uzyskać status weryfikacji formularzy, musisz mieć własność $valid (lub $invalid).

HTML:

<ng-form name="form1"></ng-form> 
<ng-form name="form2"></ng-form> 
<button ng-click="submit();">Submit</button> 

JS:

$scope.submit = function() { 
    if ($scope.form1.$valid && $scope.form2.$valid) {} 
} 

klienta Walidatory Jeśli wbudowane zatwierdzające nie mają wystarczających można dodać swoje własne weryfikatorów.

Zobacz na stronach so.com: docs i this post.