Angular CSS Classes

In the last article, we talked about how to create a custom form validation. In this section, we are going to discuss the different Angular CSS classes.

Angular CSS classes are used for Input Form Validation. There are three sets of CSS classes:

angular css classes

  • Ng-valid and ng-invalid just checks the input value from input fields
  • Ng-touched and ng-untouched checks if the fields are focused or blurred(Events). It means that when you enter in a field and got a blinking cursor, the focus event has been triggered. On the other hand, when your cursor gets out of the field, blur event is in place.
  • Ng-pristine and ng-dirty checks the field or form state.

The table below shows how Angular CSS classes are being triggered respectively. As you can see, there’s a 3-step question that is triggerred:

angular css classes

  • All input fields will be going through this validation

On the next Angular tutorial article, we will be doing some TESTING.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.