Forms in Angular-
Angular provides two primary ways to deal with forms- the template driven method and also the model- driven method which includes reactive forms. The template method is the default method of form handling in Angular where you need to utilize ng directives to build your form in the template. It is great for simple forms like basic contact forms in brand pages. It draws a lot of similarities to the old Angular JS way of form handling and also implicitly creates concepts like form control behind the scenes. The other approach is the reactive forms approach.
What are reactive forms?
Reactive forms are a platform for achieving the model-driven approach of form handling in Angular. After the release of Angular 2, Angular introduced it. In spite of the fact that it is apparently verbose, it is the most powerful and also scalable way of form handling in Angular. Rather than the template driven forms that use template directives to build the skeleton of a forms, reactive forms let you build out a form and react to the changes in the values inside the component class.
Why are reactive forms important?
With reactive forms, you discover that it is simpler to build cleaner forms as each JavaScript framework advises not to make the template clustered, this is a priority as the form logic lies in the component class. Also, it reduces the requirement for using a lot of directives and even end-to-end testing as you can now effectively test your forms. It also gives the developer all of the control and nothing is implicit anymore. Each choice about inputs and controls has to be made purposefully and, obviously, explicitly.
Steps To Make Your Angular Form Reactive-
1. Registration of reactive forms-
The initial step is to tell Angular you want to use reactive forms by importing the module and also registering it under imports. Your app.module.ts file should look like this:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployerComponent } from './employer/employer.component';
import { EmployeeComponent } from './employee/employee.component';
@NgModule({
declarations: [
AppComponent,
EmployerComponent,
EmployeeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }2. Form controls-
Form controls are classes that can hold both the data values and also the validation information of any form element. In other words, each form input you have in a reactive form should be bound by a form control. They are the basic units that make up reactive forms. To use form controls, you need to import the module into the component you need to make your reactive form in. Open your employer.component.ts file and copy this code block inside it:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'app-employer',
templateUrl: './employer.component.html',
styleUrls: ['./employer.component.css']
})
export class EmployerComponent implements OnInit {
position = new FormControl('');
constructor() { }
ngOnInit() {
}
}
Here the form control was imported. And also inside the class it was instantiated with the constructor for position. To reflect it in the interface, you have guaranteed that you associate it with the input element in the template.
// copy into employer.component.html file
<label>
Position
<input type="text" [formControl]="position">
</label>
To display it, open your app.component.html file and paste in the code block below:
<div style="text-align:center">
<h2>Angular Job Board </h2>
<app-employer></app-employer>
</div>3. Data binding in reactive forms-
At this stage, you probably won’t see any enormous difference between this and the ordinary template forms you are used to, but it begins to make a lot of sense when you need to start dealing with the data values you get from your form. For data interpolation review how you should use ng-bind directive to bind properties to values in the template. Now all you should simply to call the value and the reactive forms API will bind the data and also display it for you.
<label>
Position
<input type="text" [formControl]="position">
</label>
<p>
Your response: {{ position.value }}
</p>
With just property.value, a snapshot of the data value at the given time is captured and also displayed in the interface.
4. Replacing a data value-
There are a lot of the more things you can accomplish with the form control properties and also methods inside the reactive forms API. Look at the, at updating a data value with new data. The previously mentioned API gives a method called setValue(). To set data values for input elements, this method is used. The syntax as follows:
callingFunction() {
this. propertyName.setValue('new data value');
}
To execute it in your sample demo form, you will add a replace data button in the template to trigger the function so that the data value can be updated. In your employer.component.ts file, copy in the code block below:
import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms'
@Component({
selector: 'app-employer',
templateUrl: './employer.component.html',
styleUrls: ['./employer.component.css']
})
export class EmployerComponent implements OnInit {
position = new FormControl('');
constructor() { }
ngOnInit() {
}
callingFunction() {
this.position.setValue('backend engineer');
}
}
Now in the employer.component.ts file copy in the code block below:
<label>
Position
<input type="text" [formControl]="position">
</label>
<p>
Your response: {{ position.value }}
</p>
<p>
<button (click)="callingFunction()">Replace Data</button>
</p>
You will see it seamlessly replaces the data value on click as you determined.
Conclusion-
This is a “beginning” guide for utilizing reactive forms in Angular, you were shown the different approaches of form handling (and the differences of the approaches). You were also shown how the reactive forms approach is significant and more effective and how it encourages to write cleaner code.
If you are still confused to build reactive forms, kindly reach to the solace experts team. Team will surely help you through their knowledge. They are well proficient in new technologies and also trends to give you the best solution.
