Style w formularzach - ułatwienia

HTML5 udostępnia pseudo-selektory: invalid i valid dla pól wejściowych.

input[type="text"]:valid {
  border: 2px solid green;
}

input[type="text"]:invalid {
  border: 2px solid red;
}

Niestety, ten system jest raczej nieskomplikowany i wymagałby więcej wysiłku przy złożonych formularzach.

Zamiast pisania dodatkowego kodu oraz tworzenia i egzekwowania własnych klas CSS, aby zarządzać tymi zachowaniami, Angular oferuje kilka klas gotowych do wykorzystania.

/* field value is valid */
.ng-valid {}

/* field value is invalid */
.ng-invalid {}

/* field has not been clicked in, tapped on, or tabbed over */
.ng-untouched {}

/* field has been previously entered */
.ng-touched {}

/* field value is unchanged from the default value */
.ng-pristine {}

/* field value has been modified from the default */
.ng-dirty {}

Zwróć uwagę na trzy pary:

• ważny/nieważny
• nietknięte/dotknięte
• niezmieniony/zmieniony ("brudny")

Te pary mogą być używane w wielu kombinacjach w twoim CSS, aby zmienić styl na podstawie trzech oddzielnych flag, które reprezentują. Angular przełącza się między parami na każdym wejściu, gdy zmienia się stan wejścia.

/* field has been unvisited and unchanged */
input.ng-untouched.ng-pristine {}

/* field has been previously visited, and is invalid */
input.ng-touched.ng-invalid {}

.ng-untouched nie zostanie zastąpione przez.ng-touched dopóki użytkownik nie opuści pola po raz pierwszy

W celach szablonowych Angular daje także dostęp do nieusuniętych właściwości na wejściu, zarówno w kodzie, jak i szablonie:

<input name="myInput" [formControl]="myCustomInput">
<div [hidden]="myCustomInput.pristine">I've been changed</div>