Angular marks a form control as dirty after the user changes its contents. The control remains dirty even if the user restores its original value. section 13.4.2
The related ng-dirty CSS class enables feedback only after editing, avoiding error or success styling on untouched fields. Angular updates validation state as the user types or changes focus. section 6.5.2 section 13.4.2
Style edited fields by validation state
Use paired selectors such as input.ng-dirty.ng-invalid for a red border and input.ng-dirty.ng-valid for a green border. This leaves untouched controls visually unchanged while showing feedback after editing. section 6.5.2 section 13.4.2
Listing 6.25. The contents of the checkout.component.css file in the src/app/store folder
input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
View the complete stylesheet demonstrating ng-dirty combined with ng-valid and ng-invalid. section 6.5.2
