`input`Směrnice AngularJS

Vstupní pole s datovou vazbou:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>

Definice a použití

AngularJS upravuje výchozí chování <input>prvků, ale pouze pokud ng-modelje přítomen atribut.

Poskytují datovou vazbu, což znamená, že jsou součástí modelu AngularJS a lze na ně odkazovat a aktualizovat je ve funkcích AngularJS i v DOM.

Poskytují ověření. Příklad: <input>prvek s requiredatributem má $validstav nastavený na false, dokud je prázdný.

Poskytují také státní kontrolu. AngularJS uchovává aktuální stav všech vstupních prvků.

Vstupní pole mají následující stavy:

Hodnota každého stavu představuje booleovskou hodnotu a je buď true nebo false.

Na vstupní prvky se odkazuje pomocí hodnoty ng-modelatributu.

<input>prvky uvnitř aplikace AngularJS dostávají určité třídy . Tyto třídy lze použít ke stylování vstupních prvků podle jejich stavu.

Přidávají se následující třídy:

ng-untouched Na pole se zatím nikdo nesáhl
ng-touched Pole bylo zasaženo
ng-pristine Pole dosud nebylo upraveno
ng-dirty Pole bylo upraveno
ng-valid Obsah pole je platný
ng-invalid Obsah pole není platný
ng-valid-keyJeden klíč pro každé ověření. Příklad: ng-valid-required, užitečné, když existuje více než jedna věc, která musí být ověřena
ng-invalid-key Příklad: ng-invalid-required

Třídy jsou odstraněny, pokud je hodnota, kterou představují, false.

Použijte styly pro platné a neplatné vstupní prvky pomocí standardních CSS:

<style>

input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}

</style>