Pytanie Jak sprawdzić ważność formularza za pomocą angularjs?


Jestem bardzo nowy w angularjs. Załóżmy, że moja aplikacja ma formularz. Korzystając z inspektora, zauważyłem, że jeśli angularjs uważa, że ​​formularz jest nieprawidłowy, dodaje do formularza nieważną klasę. Śliczny.

Wydaje się więc, że aby sprawdzić, czy formularz jest prawidłowy, muszę zanieczyścić mój kod przy pomocy selektora Jquery ?! Jaki jest sposób angularjs do wskazywania ważności formularza bez użycia kontrolera formularza?


76
2018-01-13 01:40


pochodzenie


"bez użycia kontrolera formularzy" Dlaczego nie używać kontrolera? To jest kanciasty sposób - KayEss


Odpowiedzi:


Kiedy umieścisz <form> tag wewnątrz ciebie ngApp, AngularJS automatycznie dodaje kontroler formularza (w rzeczywistości istnieje dyrektywa, nazywana form które dodają nowe zachowania). Wartość atrybutu name będzie związana w twoim zasięgu; więc coś w stylu <form name="yourformname">...</form> spełni:

Formularz jest instancją FormController. Instancja formularza może opcjonalnie zostać opublikowana w zasięgu przy użyciu atrybutu name.

Aby sprawdzić ważność formularza, możesz sprawdzić wartość $scope.yourformname.$valid właściwość zakresu.

Więcej informacji, które możesz uzyskać Sekcja dla programistów o formularzach.


143
2018-01-13 02:25



Normalnie byłby nazywany wewnątrz JS jako $scope.yourformname.$valid. - Dan Atkinson
zawsze ma błąd Nie można odczytać właściwości '$ valid' z undefined - John Nguyen
Musisz jawnie nadać formularzowi nazwę, na przykład <form name = "form">, a następnie $ scope.form powinien być dostępny. - StrangeLoop
jeśli właściwość nie wydaje się być zdefiniowana w kontrolerze, jawnie zainicjuj ją w kontrolerze $scope.myformname = {}; - Nicolas Janel
@JohnNguyen Mam ten sam dokładny błąd. istnieje to obejście, które zrobiłem. W funkcji przesyłania przekaż formularz jako argument. możesz następnie udać się do kontrolera i sprawdzić, czy formularz jest poprawny w opcji yourFormName. $ valid. Użyli tego przykładu w dokumentacji Angular, ich plunker znaleźć tutaj: plnkr.co/edit/Q8mlPOSgkaPstg4uvjlc?p=preview - devonJS


Przykład

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

36
2017-10-01 10:18





Możesz także użyć myform.$invalid

Na przykład.

if($scope.myform.$invalid){return;}

11
2017-09-26 18:20





Formularz

  • dyrektywa w module ng Dyrektywa, która tworzy instancję FormController.

Jeśli określono atrybut name, kontrolka formularza jest publikowana w bieżącym zasięgu pod tą nazwą.

Alias: ngForm

W Angular formularze mogą być zagnieżdżane. 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 Angular dostarcza dyrektywę ngForm, która zachowuje się identycznie, ale może być zagnieżdżona. Pozwala to na posiadanie zagnieżdżonych formularzy, co jest bardzo przydatne przy stosowaniu dyrektyw zatwierdzania kątowego w formularzach generowanych dynamicznie za pomocą dyrektywy ngRepeat. Ponieważ nie można dynamicznie generować atrybutu nazwy elementów wejściowych za pomocą interpolacji, należy zawinąć każdy zestaw powtórnych danych wejściowych w dyrektywie ngForm i zagnieździć je w zewnętrznym elemencie formularza.

Klasy CSS

ng-valid jest ustawiony, jeśli formularz jest prawidłowy.

ng - nieprawidłowy jest ustawiony, jeśli formularz jest nieprawidłowy.

ng-pristine jest ustawiona, jeśli formularz jest nieskazitelny.

ng-brudny jest ustawiona, jeśli formularz jest brudny.

ng-przesłane jest ustawiona, jeśli formularz został złożony.

Należy pamiętać, że ngAnimate może wykrywać każdą z tych klas po dodaniu i usunięciu.

Przesyłanie formularza i zapobieganie domyślnej akcji

Ponieważ rola formularzy w aplikacjach Angular po stronie klienta jest inna niż w klasycznych aplikacjach typu roundtrip, pożądane jest, aby przeglądarka nie tłumaczyła przesyłania formularza na pełne przeładowanie strony, które wysyła dane na serwer. Zamiast tego należy uruchomić niektóre logiki javascript, aby obsłużyć przesłanie formularza w specyficzny dla aplikacji sposób.

Z tego powodu Angular zapobiega domyślnej akcji (przekazywanie formularzy do serwera), chyba że element ma określony atrybut działania.

Możesz użyć jednego z dwóch poniższych sposobów, aby określić, która metoda javascript powinna zostać wywołana podczas przesyłania formularza:

ngSubmit dyrektywa w sprawie elementu formularza

ngKliknij dyrektywa na pierwszym przycisku lub polu wprowadzania typu submit (input [type = submit])

Aby zapobiec podwójnemu uruchomieniu obsługi, użyj tylko jednej z dyrektyw ngSubmit lub ngClick.

Wynika to z następujących reguł przesyłania formularzy w specyfikacji HTML:

Jeśli formularz ma tylko jedno pole wejściowe, naciśnięcie klawisza Enter w tym polu powoduje uruchomienie formularza przesyłania (ngSubmit) jeśli formularz ma 2 lub więcej pól wejściowych i nie ma przycisków lub input[type=submit] naciśnięcie klawisza Enter nie spowoduje przesłania jeśli formularz ma jedno lub więcej pól wejściowych i jeden lub więcej przycisków lub input[type=submit] następnie wciśnięcie enter w którymkolwiek z pól wejściowych spowoduje uruchomienie obsługi kliknięcia na pierwszym przycisku lub input[type=submit] (ngClick) i procedura obsługi przesyłania w załączającym formularzu (ngSubmit).

Wszelkie oczekujące zmiany ngModelOptions będą miały miejsce natychmiast po przesłaniu załączającego formularza. Pamiętaj, że zdarzenia ngClick będą miały miejsce przed zaktualizowaniem modelu.

Użyj ngSubmit, aby uzyskać dostęp do zaktualizowanego modelu.

app.js:

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

Formularz:

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

Źródło: AngularJS: API: form


5
2018-05-05 17:04