Forms are an essential component of any web application or mobile application. Whether it is a login page, search bar, or filters, all involve using forms. They facilitate user interaction and data collection, making them a crucial part of the user experience.
In web applications, forms are of two types, Template Forms, and Reactive Forms. This blog will focus on exploring and understanding Reactive Forms in the context of Angular.
Introduction
This will be the first blog in our Reactive Forms in Angular Series. In this series, we will explore the power of reactive forms and how they can significantly enhance the form-handling capabilities of your Angular applications. You've come to the right place if you are new to or want to deepen your understanding.
Setting up the Project
Before jumping straight into forms, let’s ensure we have the basic project setup. Ensure you have Angular CLI installed. not, you can install it using npm. Once Angular CLI is ready, create a new Angular project using the following command:
- Project Creation using Angular CLI
ng new my-reactive-forms-project
cd my-reactive-forms-project
We must import and set up the necessary modules to use Reactive Forms in your project. Open the app.module.ts
file and import the ReactiveFormsModule from @angular/forms
:
import { ReactiveFormsModule } from '@angular/forms';
Next, add ReactiveFormsModule to the imports
array in the @NgModule decorator:
@NgModule({
imports: [
// other imports...
ReactiveFormsModule
],
// other declarations and providers...
})
export class AppModule { }
Generating the Login Form Component
To generate a new component for the login form, use the Angular CLI:
ng generate component login
Importing the Login Form Component in app.component.html
Open the app.component.html
file, and let's add the newly generated login
component to the main app component's template:
<div>
<app-login>
</app-login>
</div>
Creating the Login Form
We will keep things simple for this blog to help you understand better. Let us create a simple login form using reactive forms.
Login Component File
Now, let's work on the login form using Reactive Forms. Open the login.component.ts
file and add the following code:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
password: new FormControl('', Validators.required)
});
}
onSubmit() {
// Handle form submission here
if (this.loginForm.valid) {
console.log(this.loginForm.value);
// Additional logic to authenticate user or
// perform other actions
}
}
}
Note: Reactive forms in Angular revolve around two key classes: FormGroup
and FormControl
. A FormGroup
represents a collection of form controls and a FormControl
represents an individual form control, such as an input field.
In the code above, we use Angular's built-in Validators
to apply form validation rules to the email and password fields.
Validators.required
: This validator ensures that the field is mandatory and that the user must provide a value before submitting the form. If the user leaves the email or password field empty, this validator will trigger an error message.Validators.email
: This validator checks if the entered value in the email field is in a valid email format. If the user enters an invalid email address, this validator will display an error message.
Template Integration and Adding Validation Messages
Let's integrate the Reactive Form into the login.component.html
template and display validation messages:
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div>
<label for="email">Email:</label>
<input type="email" id="email" formControlName="email">
<div *ngIf="loginForm.get('email')?.invalid && loginForm.get('email')?.touched">
<div *ngIf="loginForm.get('email')?.errors?.['required']">Email is required.</div>
<div *ngIf="loginForm.get('email')?.errors?.['email']">Invalid email format.</div>
</div>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" formControlName="password">
<div *ngIf="loginForm.get('password')?.invalid && loginForm.get('password')?.touched">
<div *ngIf="loginForm.get('password')?.errors?.['required']">Password is required.</div>
</div>
</div>
<button type="submit" [disabled]="loginForm.invalid">Login</button>
</form>
Reactive Forms in Action
It's time to run our Angular application. Open a terminal or command prompt in the project root directory and execute the following command:
ng serve
Once the build process is complete, you can access the application by navigating to http://localhost:4200/
in your web browser. You should now see the login form displayed on the page.
As you use the login form, it enforces the validation rules we set earlier. If you try to submit the form without entering valid email and password values, validation messages will guide you. Once you provide valid values, the submit button will enable login.
Conclusion
In this blog, our primary focus was introducing Reactive Forms in Angular and building a functional login form. We intentionally kept the CSS styling minimal to prioritize the core concepts.
In future blogs, we will dive deeper into custom validations, form submission handling, and dynamic forms and explore additional powerful features of Reactive Forms.
Lastly, Your support keeps me going, and I give my 100 percent to these blogs! If you’ve found value, consider fueling the blog with a coffee ☕️ donation at the below link.
Thank you! 🙏
Top comments (0)