There are different CSS classes being assigned to an input element depending on what state it is in. Let's have a look at an input element with a required attribute set, prior to us inputting any data. We expect it to tell us that something is wrong, due to the fact that the input field is empty and we have added a required attribute to it:

<input id="name" name="name" placeholder="first name" required ng-reflect-required ng-reflect-name="name" ng-reflect-model class="ng-untouched ng-pristine ng-invalid">

We can see that the following classes have been set:

• ng-untouched, which means that no one has attempted to press the Submit button yet
• ng-pristine, which essentially means that no attempts have been made to input data into this field. It would be set to false if you enter a character and remove the said character
• ng-invalid, which means that the validator is reacting and says something is wrong

Entering a character into the field, we see that ng-pristine disappears. Entering some characters in both fields and pressing Submit, we see that ng-untouched turns into ng-touched. This also causes ng-invalid to turn into ng-valid.

OK, so now we have a better understanding of what CSS turns into what, at what time, and can style our component appropriately.