- [Instructor] The ng control status directive…that applies the untouched and touched…and pristine and dirty CSS classes…to the elements with the form control name attribute…also handles applying the ng-valid…and ng-invalid classes.…If I inspect the customer name field…in the browser dev tools,…I can see the ng-untouched and ng-pristine classes on it…and there's also this ng-invalid class,…which is on there because this field…has the required validator…and that validator is reporting an invalid state.…
When I put valid data into the customer name field,…the ng control status directive…handles removing that ng-invalid class…and adding the ng-valid class.…So you can use these classes to style against…to give users visual feedback…on the valid state of your form fields.…Over in the order sheet component CSS file,…the CSS for the order sheet component…already has style rules for fields…with the ng-invalid class.…There is one that applies a red border…to the input of type text…when it has that ng-invalid class.…
So back in the browser,…
Updated
12/7/2016Released
6/27/2016This course shows how to build HTML web forms using the building blocks, built-in validation properties, and methods of the Angular forms module. Learn how to use the model-driven forms approach to build out a model representation of form data in code and bind it to native HTML form elements. This course also explores how to implement validation, using JavaScript, in case you need more fine-tuned control of your interactions.
- Building an Angular form
- Creating a model-driven form
- Using form building blocks: Controls, groups, and arrays
- Handling different input types: Text, checkboxes, selections, and radio input
- Adding change detection to your forms
- Creating custom validations
Share this video
Embed this video
Video: Using built-in CSS classes for validation