Skip to main content

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. 

Popular posts from this blog

Missionaries & Canibal Problem in AI using Pro Log

Introduction: Missionaries and Cannibals is a notable problem in Artificial Intelligence in which three Missionaries and three Cannibals attempt to cross a river to the other side using a boat.  However, there are constraints on the problem, most notably that there can never be more Cannibals than Missionaries on either side of the river (as they will be eaten!), the boat must always take across at least one person, and the goal state is when all Missionaries and all Cannibals have successfully reached the right side of the river from the left.  Thus, with these constraints in mind, they can be programmed into Prolog fairly simply, and a solution can be searched for.