In Angular, form handling and validation are made easy with the help of the FormsModule and ReactiveFormsModule modules. Here's an example of handling form submission and validation using reactive forms:
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form',
template: `
<h1>Registration Form</h1>
<form [formGroup]="registrationForm" (ngSubmit)="submitForm()">
<div>
<label for="name">Name:</label>
<input type="text" id="name" formControlName="name">
<div *ngIf="name.invalid && (name.dirty || name.touched)">
<div *ngIf="name.errors.required">Name is required.</div>
</div>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" formControlName="email">
<div *ngIf="email.invalid && (email.dirty || email.touched)">
<div *ngIf="email.errors.required">Email is required.</div>
<div *ngIf="email.errors.email">Invalid email format.</div>
</div>
</div>
<button type="submit" [disabled]="registrationForm.invalid">Submit</button>
</form>
`
})
export class FormComponent {
registrationForm: FormGroup;
constructor(private formBuilder: FormBuilder) {
this.registrationForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]]
});
}
submitForm() {
if (this.registrationForm.valid) {
// Perform form submission logic here
console.log(this.registrationForm.value);
} else {
// Handle invalid form submission
console.log('Invalid form');
}
}
get name() {
return this.registrationForm.get('name');
}
get email() {
return this.registrationForm.get('email');
}
}
In this example, we have a FormComponent that represents a registration form. We use the FormBuilder service to create a reactive form by defining the form controls and their validators.
Inside the constructor, we initialize the registrationForm using the formBuilder.group() method. The form controls are defined for the 'name' and 'email' fields, along with the corresponding validators (Validators.required and Validators.email).
In the template, we bind the registrationForm to the <form> element using the [formGroup] directive. The form controls are connected to the input fields using the formControlName directive.
We also include error messages that are conditionally displayed based on the form control's validity and interaction status. This is achieved using the *ngIf directive and the form control's properties like invalid, dirty, and touched.
The submit button is disabled if the form is invalid ([disabled]="registrationForm.invalid").
When the form is submitted ((ngSubmit)="submitForm()"), the submitForm() method is called. We check if the form is valid, perform the necessary form submission logic if it is valid, and handle invalid form submissions if the form is invalid.
The get methods name() and email() are used to conveniently access the form controls' properties in the template.
This example demonstrates how to handle form submission and validation using reactive forms in Angular. Reactive forms provide a flexible and powerful approach for managing forms in Angular applications.