Angular 2+ Forms - Template Driven Forms

Forms are doing a big job on I/O handling in a web application. Especially in Angular 2 application, we are using the NgForm directive to handling the normal forms with the more advanced feature enabled forms. 

In Angular 2, They introduced two types of modules to handle the NgForms. They are 

1. Template Driven Forms
2. Model Driven Forms

to enabling this forms in your application, you need to import some modules. as follow in your root module. 

Here we are updating two modules from @angular/forms and we put the FormsModule and ReactiveFormsModule in the imports array.

After enabling the forms we are going to look after the template driven forms.

Template Driven Forms

Template Driven Forms are enabling by importing the FormsModule in your app.module.ts,  We already show you how to enable it on above snippets. 

Here when you look on into the app.component.html 

Every form is an instance of the ngForm directive. Here the signupForm is the instance of the ngForm directive, not the form directive. If you remove the line #signipForm=ngForm to #signupForm then it only points to the form directive. 

then (ngSubmit) is the built-in method to whenever the form is submitted. 

ngModel is turned the form field to FormControl using the name property. In the method, we declare on app.component.ts ( registerUser ) we can access the signUpForm values by accessing using the signUpForm.value to getting all values of all FormControlls. Also, you can validate the fields using the signUpForm.valid, Here we don't have any validation rules. So it is by default true.