Web
Analytics
angular 4 reactive forms | model-driven forms | example - Tutorial

For Consultation : +91 9887575540

Stay Connected :

Angular 4 Model Driven Forms

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

1.It is also called reactive forms.

2.In this approach, we have to add an additional layer of complexity and functionality by having you to declare the model of the form in your component class.

3.We represent the form as a model composed of instances of FormGroups and FormControls.

4.HTML for our form isn’t automatically created for us in model-driven approach.

5.need to write the HTML that represents our form and then explicitly link the HTML form elements to code on our component.

6.We represent the form as a model composed of instances of FormGroups and FormControls.




Example :

Step 1: Create an angular 4 project.(ng new projectname)

Step 2: Add following code into app.component.html




Step3: Update app.module.ts as follows(add reference of reactive form module library)

Step 4: Add Following code into app.component.ts.




 

Output:


Select your currency