Pytanie Wyłącz przycisk przesyłania, gdy formularz jest nieprawidłowy w AngularJS


Mam taką formę:

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button disabled="{{ myForm.$invalid }}">Save</button>
</form>

Jak widać, przycisk jest wyłączony, jeśli wejście jest puste, ale nie zmienia się z powrotem na włączone, gdy zawiera tekst. Jak mogę to sprawić?


160
2018-03-08 17:41


pochodzenie


angulartutorial.net.net/04/... - Prashobh


Odpowiedzi:


Musisz użyć nazwy formularza, a także ng-niepełnosprawnych: Oto demo na Plunkerze

<form name="myForm">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="myForm.$invalid">Save</button>
</form>

315
2018-03-08 17:43



Przepraszam, używam go teraz. Mimo to nadal jest wyłączony, nawet jeśli pole tekstowe zawiera tekst - ali
Tak, coś przeoczyłem. Zaktualizowałem to. - Ben Lesh
Dzięki. Tak było - ali
+1 Przypadkowo, właśnie czytałem ten wspaniały post twojego: benlesh.com/2012/11/angular-js-form-validation.html - Ben
@MichaelCwienczek technicznie, możesz dodać ng-form do znacznika div: <div ng-form="myForm"> ... stuff here .. </div>. Chociaż, jeśli przesyłasz wartość z wejść, naciśnięciem przycisku, I wysoko zalecamy używanie a <form/> tag, jeśli nie z innego powodu, niż pozwala użytkownikowi uderzyć [ENTER] i przesłać formularz. Ale prawdopodobnie stanowi to również lepszą praktykę ze względu na takie kwestie, jak problemy z dostępnością. - Ben Lesh


Aby dodać do tej odpowiedzi. Właśnie się dowiedziałem, że ulegnie on awarii, jeśli użyjesz łącznika w nazwie formularza (Angular 1.3):

Tak będzie nie praca:

<form name="my-form">
    <input name="myText" type="text" ng-model="mytext" required />
    <button ng-disabled="my-form.$invalid">Save</button>
</form>

30
2017-10-28 21:38



Tak, nazwa formularza powinna być w przypadku wielbłąda dla wszelkich zatwierdzeń formularza AngularJS. - dubilla
z reguły wszystkie js podobne wyrażenia rozpoznają obiekty w formie camelcase, podczas gdy myślnik jest dla html jak składnia - ecoologic
Co się dzieje, jeśli formularz jest elementem zestawu, a zatem wymagane jest posiadanie nazwy z łącznikiem (np. "My_formset_name-0")? - trubliphone
W powyższym przykładzie wierzę myForm.$invalid powinien nadal działać, więc w twoim przypadku, pomyślałbym my_formset_name0.$invalid powinno działać. - wvdz


Wybrana odpowiedź jest poprawna, ale ktoś taki jak ja może mieć problemy z sprawdzaniem asynchronizacji z wysyłaniem żądania do serwera - przycisk nie będzie wyłączony podczas danego przetwarzania żądania, więc przycisk będzie migał, co wygląda dość dziwnie dla użytkowników.

Aby to unieważnić, wystarczy obsłużyć oczekujący stan formularza:

<form name="myForm">
  <input name="myText" type="text" ng-model="mytext" required />
  <button ng-disabled="myForm.$invalid || myForm.$pending">Save</button>
</form>

24
2018-05-23 17:09



Bardzo dziękuję za rozwiązanie sprawdzania asynchronizacji! - Martin Brandl


Jeśli korzystasz z Reactive Forms, możesz użyć tego:

<button [disabled]="!contactForm.valid" type="submit" class="btn btn-lg btn primary" (click)="printSomething()">Submit</button>

2
2017-09-01 12:31





Możemy stworzyć prostą dyrektywę i wyłączyć przycisk, dopóki wszystkie pola obowiązkowe nie zostaną wypełnione.

angular.module('sampleapp').directive('disableBtn',
function() {
 return {
  restrict : 'A',
  link : function(scope, element, attrs) {
   var $el = $(element);
   var submitBtn = $el.find('button[type="submit"]');
   var _name = attrs.name;
   scope.$watch(_name + '.$valid', function(val) {
    if (val) {
     submitBtn.removeAttr('disabled');
    } else {
     submitBtn.attr('disabled', 'disabled');
    }
   });
  }
 };
}
);

Aby uzyskać więcej informacji, kliknij tutaj


1
2018-04-26 17:38



Twoja metoda rozwiązania działa dla mnie z niewielkim uszczypnięciem. Dziękuję Ci - Tatipaka
Dlaczego miałbyś to robić, gdy istnieją natywne dyrektywy? ng-disabled w kanciastych 1.x i [disabled] w kanciastym 2 | 4.x, które są znacznie lepiej przetestowane niż to ?. Po drugie, dlaczego dyrektywa ma zasięg do formularza, aby wyłączyć zagnieżdżony przycisk, jest bardzo specyficzny. Źle przemyślane rozwiązanie IMO. - David Barker
Powyżej jest przykładowa dyrektywa, oryginalna ma wiele scenariuszy, takich jak zagnieżdżone pole wyboru itp. I nie chcę niechlujstwa mojego kodu html dodając w każdym formularzu, zamiast tego ta dyrektywa zajmie się wszystkim. - Prashobh


<form name="myForm">
        <input name="myText" type="text" ng-model="mytext" required/>
        <button ng-disabled="myForm.$pristine|| myForm.$invalid">Save</button>
</form>

Jeśli chcesz być nieco bardziej surowy


0
2017-11-14 02:14