Jaka jest różnica między wymaganym a wymaganym ng?

278

Jaka jest różnica między requiredi ng-required(sprawdzanie poprawności formularza)?

TidharPeer
źródło

Odpowiedzi:

421

Elementy formularza AngularJS szukają requiredatrybutu do wykonywania funkcji sprawdzania poprawności. ng-requiredpozwala ustawić requiredatrybut w zależności od testu logicznego (na przykład, wymaga tylko pola B - powiedzmy numeru studenta - jeśli pole A ma określoną wartość - jeśli wybrałeś „student” jako wybór )

Jako przykład, <input required>i <input ng-required="true">są zasadniczo to samo

Jeśli zastanawiasz się, dlaczego tak jest (a nie tylko make <input required="true">lub <input required="false">), jest to spowodowane ograniczeniami HTML - requiredatrybut nie ma żadnej powiązanej wartości - sama jego obecność oznacza (zgodnie ze standardami HTML), że element jest wymagany - więc kątowy potrzebuje sposobu na ustawienie / wyłączenie wymaganej wartości ( required="false"byłby nieprawidłowym kodem HTML)

Tiago Roldão
źródło
Jak mogę odpowiednio usunąć ng-wymagane? Ponieważ wypróbowałem kilka metod jquery bezskutecznie
themhz
28
Nie jestem pewien, czy rozumiem pytanie. W praktyce nigdy nie używasz ng-wymagany = "prawda", ale raczej ng-wymagany = "scopedVariable" lub ng-wymagany = "scopeTruthTest ()", a wartość zmienna / funkcja określa, czy element jest wymagany. Nigdy nie używaj jquery, aby zadzierać z tymi rzeczami w aplikacji kątowej, w przeciwnym razie uzyskasz nieprzewidywalne wyniki!
Tiago Roldão,
Warto wspomnieć, że ng-wymagane wyświetla domyślny komunikat o błędzie w stylu podpowiedzi z napisem „to pole jest wymagane”, co nie zawsze jest pożądane. Szukam sposobu, aby to wyłączyć
Adam Spence
2
Naprawdę nie. Nie jestem pewien, ale myślę, że masz na myśli walidację HTML5, która jest wykonywana automatycznie przez większość współczesnych przeglądarek. Jeśli chcesz, by przejąć kontrolę nad tym (wyłączając co robi przeglądarka) można dodać novalidate atrybut: <form method="post" action="/foo" novalidate>. Ponownie, jest to atrybut html5, niezwiązany z angularJS.
Tiago Roldão
Spodziewałbym się, że gdy ng-requiredwskazuje zmienną scope / controller, Angular monitoruje ją pod kątem zmian i odpowiednio ustawia wymagany atrybut. Podczas gdy w przypadku prostego requiredatrybutu HTML nie masz takiej elastyczności. Nie? A skoro jesteśmy na tym samym temacie, co powiesz na ng-attr-required? Czy to dokładnie to samo co ng-required?
AsGoodAsItGets
78

Chciałbym zrobić dodatek do odpowiedzi tiago :

Załóżmy, że ukrywasz element, używając ng-showi dodając do niego requiredatrybut:

<div ng-show="false">
    <input required name="something" ng-model="name"/>
</div>

wyrzuci błąd coś takiego:

Niepoprawna kontrola formularza o nazwie = '' nie może być aktywowana

Wynika to z faktu, że po prostu nie można narzucić requiredweryfikacji hiddenelementów. Użycie ng-requiredułatwia warunkowe zastosowanie wymaganej walidacji, co jest po prostu niesamowite !!

I_Debug_Wszystko
źródło
13
Zdecydowanie dobra wskazówka, możesz też użyć ng-ifzamiast ng-show/, ng-hideaby ominąć ten potencjalny problem.
jkjustjoshing
1
To powinna być zaakceptowana odpowiedź. Jeśli masz ukryte elementy (ng-show = „false”), istnieje różnica między ng-wymagany = „prawda” i po prostu „wymagany”, jak opisano w tej odpowiedzi, i dostaliśmy się do gorącej wody z powodu tej różnicy.
Ivan Krivyakov
17

Atrybut HTML required="required" jest stwierdzenie mówi przeglądarce, że pole to jest wymagane, aby formie ważność. ( required="required"to formularz XHTML, samo użycie requiredjest równoważne)

The kątowej atrybut ng-required="yourCondition" „isrequired (yourCondition)” oznacza i ustawia atrybut HTML dynamicznie dla Ciebie w zależności od stanu pacjenta.

Należy również pamiętać, że wersja HTML jest niejasna , to nie można napisać coś podobnego warunkowego required="true"lub required="false"tylko obecność tych sprawach atrybutów (obecnie oznacza prawdziwy)! Tutaj pomaga Ci Angular ng-required.

Christophe Roussy
źródło
Tak, niestety, przeglądarka nie pozwala na ustawienie wartości prawda / fałsz, prawdopodobnie uważana za zbyt techniczną ...
Christophe Roussy