DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Reactive Forms In Angular
haimantika mitra for Angular

Posted on

Reactive Forms In Angular

Hi readers πŸ‘‹, glad to have you as a part of my learning journey!
Last week was a bit rough, back again this week with the fifth blog.

For the new readers, I document my learning journey in the series "Getting Started With Angular", hoping it can help people learn.

This week we will be learning about Reactive Forms.

What Are Reactive Forms?

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. Validation logic and
initial state of controls are defined by model object. Each change in the form state returns a new state of the model. Every control of reactive forms emits an observable, which gives status and value of the form controls. Reactive forms also provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested.

Adding a Basic Form Control

There are three steps to using form controls:

  • Register the reactive forms module in your application. This module declares the reactive-form directives that you need to use reactive forms.

  • Generate a new FormControl instance and save it in the component.

  • Register the FormControl in the template.

Importing ReactiveFormsModule

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Creating a FormControl

After the module is imported, we import the class FormGroup. The FormControl class corresponds to one individual form control,
tracking its value and validity.

export class AppComponent {
email = new FormControl(β€˜β€™);
}
Enter fullscreen mode Exit fullscreen mode

Using email FormControl:

<input [formControl]=’email’
type=”text”

Reactive Forms 79

placeholder=”Enter Email” />
{{email.value | json}}
Enter fullscreen mode Exit fullscreen mode

Creating FormGroup

FormGroup is a group of FormControls. In a form, there is expected to be more than one control, this is when FormGroup comes to play.

Example: Creating a form with two controls - email and password

loginForm = new FormGroup({
email: new FormControl(β€˜ β€˜),
password: new FormControl(β€˜ β€˜)
});
Enter fullscreen mode Exit fullscreen mode

Using both the controls, here's how the entire code will look like:

<form [formGroup]=’loginForm’ novalidate class=”form”>
<input formControlName=’email’
type=”text”
class=”form-control”
placeholder=”Enter email” />
<input formControlName=’password’
type=”password”
class=”form-control”
placeholder=”Enter password” />
</form>
{{loginForm.value | json}}
{{loginForm.status | json }}
Enter fullscreen mode Exit fullscreen mode

Using FormBuilder

Creating form control instances manually can become repetitive when dealing with multiple forms. The FormBuilder service provides convenient methods for generating controls.

The first step is to import Form Builder and injecting it:

import { FormBuilder } from '@angular/forms';
constructor(private fb: FormBuilder) { }

Enter fullscreen mode Exit fullscreen mode

Using the same login form example, this is how the code will look:


import { Component, OnInit } from β€˜@angular/core’;
import { FormGroup, FormControl, FormArray, Validators,
FormBuilder } from β€˜@angular/forms’;
@Component({
selector: β€˜app-root’,
templateUrl: β€˜./app.component.html’,
styleUrls: [β€˜./app.component.css’]
})
export class AppComponent implements OnInit {
loginForm: FormGroup;
constructor(private fb: FormBuilder) {
}
ngOnInit() {
this.loginForm = this.fb.group({
email: [null, [Validators.required,
Validators.minLength(4)]],
password: [null, [Validators.required,
Validators.maxLength(8)]]
});
}
loginUser() {
console.log(this.loginForm.status);
console.log(this.loginForm.value);
}
}
Enter fullscreen mode Exit fullscreen mode

Ending Notes

Thank you for reading till the end.

Most of my learning credit goes to:

With these blogs, I expect to note my journey and help more people.

For any questions or suggestions, drop them on the comments below or reach out to me @Haimantika.

Oldest comments (1)

Collapse
 
deepakjaiswal profile image
Sandeep

Great but explain more

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.