Template Driven Forms API – Angular v5.x

Angular has rich form support regarding both template driven and reactive forms. This article is going to focus only on the template-driven forms and validations.
Template-Driven Forms :
Definition:
Angular will create FormGrop and FormControl objects based on applied directives like ngForm, ngModel, ngModelGroup and template reference variables from a form template.

TEMPLATE DRIVEN DIRECTIVES:

All above directives are available once we import FormsModule into application NgModule.
NgForm – Will create a top-level FormGroup instance and binds it to a form to track updates/validations.
NgModel – Will Creates a FormControl instance and will track input field value, events and validation rules.it will keep view and model in sync.
NgModelGroup – Will create a sub-group form controller to maintain nested structured model.
Simply:

Example: Live Example

Leave a Reply

Your email address will not be published. Required fields are marked *