Web
Analytics
template driven angular 4 forms - Tutorial

For Consultation : +91 9887575540

Stay Connected :

Angular 4 Template Driven Forms:

  • Angular offers two types of forms: template-driven and model-driven

1.Template Driven :

  • template-driven forms place the emphasis on developing a form within an HTML template and handling most of the logic for the form-inputs, data validation, saving, and updating-in form directives placed within that template.
  • Very less code required because most of the forms related work have been done by the angular framework itself.
  • heavy use of the ngModel form directive
  • FormModule must be imported into app-module.ts
  • FormModule is available for following package

import { FormsModule } from ‘@angular/forms’;





 

Two Important Directives for form building:

  • • NgForm • ngModel
  • ngForm: It plays a great role in form building, this angular directive concrete values of all HTML elements of form.
  • We can say that by using this directive we are capable to create form object.
  • NgModel: This directive has used no binding, one-way and two-way data binding.
  • It is responsible to hold values of HTML elements.
  • It is also used to validate HTML elements values.

Example

app.component.ts

Output:







Select your currency