Jak mogę sprawdzić ważność formularza dołączonego do formularza ng z zakresu nadrzędnego?

Question

Mam subformat, który jest współużytkowany przez wiele widoków w mojej aplikacji. W jednym widoku ten podformularz jest wyświetlany sam z przyciskiem wstecz/kontynuacji u dołu, który prowadzi użytkownika do następnego podformularza. W innym widoku podformularz jest wyświetlany na tej samej stronie co inne podformy (w zasadzie jeden długi formularz).

Ponieważ html w podformularzu jest w 100% identyczny w obu widokach, podzieliłem go na częściowy i używam do renderowania ng-include. W widoku, który wyświetla tylko podformularz z przyciskami wstecz/kontynuacji, renderuję przyciski wstecz/kontynuacji w kodzie HTML rodzica.

Wizualnie wszystko działa poprawnie, a ja jestem w stanie uzyskać dostęp do wszystkich danych wprowadzonych w formularzu (user.email, user.password, user.etc...).

Problem polega na tym, że włączam/wyłączam przycisk "kontynuuj" w zależności od tego, czy użytkownik poprawnie wypełnił formularz, a to nie działa w wariancie "tylko podformularz", ponieważ zakres nadrzędny nie Zdaje się, że jest w stanie uzyskać dostęp do statusu formularza. Jeśli wciśniemy przyciski w częściowym, działa, ale nie chcę tego robić, ponieważ przyciski nie należą tam w każdym przypadku użycia częściowego.

JSFiddle Example

Wskazówki w moim przykładzie, że przycisk złożyć w czerwonej obwódce jest wyłączony aż coś jest wpisane w polu i „forma nieważne?” aktualizacje wartości, a przycisk w niebieskim obramowaniu jest zawsze włączony i "Nieprawidłowy formularz?" wartość jest pusta. W jaki sposób uzyskać dostęp do wartości myForm.$invalid z zakresu nadrzędnego?

Answer 1

Jeśli jest to sub-formularz można po prostu przenieść formularz-tag z sub-formy i do głównego formularza: updated JSFiddle

Można też zagnieżdżać formularze za pomocą ngForm-directive:

W postaciach kątowych można zagnieżdżać. Oznacza to, że forma zewnętrzna jest ważna, gdy wszystkie formularze podrzędne są również ważne. Jednak przeglądarki nie pozwalają na zagnieżdżanie elementów, dlatego kątowy zapewnia alias ngForm, który zachowuje się identycznie, ale pozwala na zagnieżdżanie formularzy.

Rezultat jest nieco brudny. Wolę stworzyć „myForm' Dyrektywa z nowym zakresem, aby uniknąć używania $ rodzica - coś takiego:

myApp.directive('myForm',function(){ 
    return{ 
     restrict:'E', 
     scope:{model:'='}, 
     templateUrl:'/form.html', 
     replace:true 
    } 
}); 

- zobacz ten zakres JSFiddle example

Answer 2

dziecka utworzony podczas korzystania NG-to jest ukrywanie funkcji formularza przed rodzicem.

Oprócz stosowania dyrektywy, można również dodać obiekt do rodziców, ale ważne jest, aby ustawić nazwę formularza do obiektu z właściwością tak:

<form name="myFormHolder.myForm"> 

oraz w regulator nadrzędny

$scope.myFormHolder = {}; 

następnie dodaje powinno działać:

$scope.myFormHolder.myForm.$pristine 

W ten sposób, gdy th e formularz jest oceniany, myForm. $ valid zostanie ustawione na rodzica. Wydaje mi się, że zadałem to samo pytanie: Why form undefined inside ng-include when checking $pristine or $setDirty()?