Introduction
There are two kinds of forms in Angular:
- Template-driven forms
- Reactive forms
For the purpose of this article, we will be exploring Reactive Forms only.
Forms in Angular have three base classes:
- FormControl tracks the value & validation status of an individual form control.
- FormGroup tracks the same values & status for a collection of form controls.
- FormArray tracks the same values and status for an array of form controls.
In the example we are going to explain, we are only going to use FormControl and FormGroup.
Explore Dynamics 365 Customer Engagement
Evaluating CRM options for your business? Learn more about Microsoft's CRM Solutions, a product suite called Dynamics 365 Customer Engagement.
Learn MoreDynamic Contact Form Using Reactive Forms:
Let us assume we have a page where we must take contact information from users. Business requirements are such that if a user accesses the page from a certain locality, the user must input the address in addition to the other contact fields on the form.
We can implement this using Reactive Forms. Let’s dive into the code to make it possible. We are going to use the following steps in our existing code.
1. Import Reactive Forms module in Dynamic Forms project
Import ReactiveFormsModule and FormsModule in our application
2. Import FormGroup and Form Control in app.component.ts
Import FormGroup and FormControl in our app.component.ts file
import { FormControl, FormGroup } from ’@angular/forms’;
3. Create FormGroup in app.component Class
Create a form group named ContactForm in our AppComponent class
Along with the Form Group, we have initialized a boolean variable address (which we will provide to a function to mimic the specific location functionality for a user) and a json object array, formData, for our fields, which the form will populate on the go. Remember! In the real world this data may come from an API call or some other source. The idea is to simulate a real-world scenario.
4. Create a function in app.component.ts
Create a setSettings function that will populate the form fields dynamically. In this function, we are passing two parameters, formData and address.
Explanation:
In setSettings function, we do the following:
i) Check if the user is from a specific location or not, and if he is, we add a new field to our formData.
ii)Loopthrough formData array and create a new form control and assign it to form object.
iii) We populate our FormGroup, ContactForm.
5. Dynamic Forms template file changes in app.component.html
In our app.component.html file, we have the following code:
Explanation:
i) [formGroup] directive to refer to our ContactForm, which we created and populated.
ii)*ngFor directive to loop through our formData and layout corresponding fields, respectively.
iii) formControlName synchronizes a FormControl in an existing FormGroup to a form control element by name. In our case, it refers to thedynamic form fields we have defined in the formData object array.
iv) We have displayed the ContactForm value at the end of our page to show the values as we input them.
6. In the end, we have to call our setSettings function in ngOnInit()
That is it. If we run the project, we will see the following fields on the screen that have been added dynamically in our form.
Now assume a person accesses our page from a specific location. Our business requirements demand address in the contact form. We do not have to change anything in the existing code or create a separate form to cater to this requirement. We have to change the model, and the form will automatically react to the new model and display the new field.
Now let’s assign the value ‘true’ to our address variable and see what happens.
address: boolean = true;
You can see that our dynamic forms have responded to a change in the model.
Conclusion
Explore Recent Blog Posts
