A form creates a cohesive, effective, and compelling data entry experience. An Angular form coordinates a set of data-bound user controls, tracks changes, validates input, and presents errors.
The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation and more:
- An Angular HTML form template.
- A form component class with a Component decorator.
- The ngSubmit directive for handling the form submission.
- Template local variables such as #heroForm, #name, #alter-ego and #power.
- The ngModel directive for two-way data binding.
- The ngControl for validation and form element change tracking.
- The local variable’s valid property on input controls to check if a control is valid and show/hide error messages.
- Controlling the submit button's enabled state by binding to NgForm validity.
- Custom CSS classes that provide visual feedback to users about invalid controls.
- AngularJS - HTML enhanced for web apps!
- Twitter Bootstrap - great UI boilerplate for modern web apps