Handling form submission & form reset In Angular

Introduction:

Forms are an essential part of web applications, and handling form submission and resetting is a common requirement. In Angular, the Angular Forms module provides powerful tools for managing form submissions and resets. In this blog post, we will explore how to handle the form submission and form reset in Angular applications, covering the necessary steps and providing practical examples.

If you want to learn about a new feature of angular, you can refer here.

1. Setting Up a Basic Form:

Before diving into form submission and reset, let’s set up a basic form in Angular.

Step 1: Create a Component:

Create a new component using the Angular CLI:

ng generate component MyForm

Step 2: Build the Form:

In the component’s TypeScript file (e.g., my-form.component.ts), import the necessary modules and build the form using the Angular Forms module. For example:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', [Validators.required, Validators.email]),
      // Add more form controls...
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // Form is valid, handle the submission
      console.log(this.myForm.value);
      // You can send the form data to an API, perform further actions, etc.
    }
  }

  onReset() {
    this.myForm.reset();
  }
}

2. Handling Form Submission:

Angular provides an easy way to handle form submissions and perform actions based on the validity of the form.

Step 1: Create the onSubmit() Method:

In your component’s TypeScript file, create a method called onSubmit() that will be triggered when the form is submitted. Inside this method, you can check if the form is valid using the valid property of the form. If the form is valid, you can perform the desired actions, such as sending the form data to an API or performing further processing.

Step 2: Add the Submit Button in the Template:

In the component’s HTML template (e.g., my-form.component.html), add a submit button inside the form and bind it to the onSubmit() method using the (click) event. For example:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <!-- Form controls... -->
  <button type="submit">Submit</button>
</form>

3. Handling Form Reset:

Resetting a form is a common requirement, allowing users to clear the form and start afresh.

Step 1: Create the onReset() Method:

In your component’s TypeScript file, create a method called onReset() that will be triggered when the form reset action is performed. Inside this method, you can use the reset() method of the form to reset all form controls to their initial values.

Step 2: Add the Reset Button in the Template:

In the component’s HTML template, add a reset button inside the form and bind it to the onReset() method using the (click) event. For example:

<form [formGroup]="myForm">
  <!-- Form controls... -->
  <button type="reset" (click)="onReset()">Reset</button>
</form>

4. Displaying Form Validation Errors:

To provide a better user experience, you can display validation errors when users interact with the form.

Step 1: Display Validation Errors in the Template:

In your component’s HTML template, use Angular’s built-in form validation properties and methods to display validation errors next to the form controls. For example:

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label>Name:</label>
    <input type="text" formControlName="name">
    <div *ngIf="myForm.get('name').touched && myForm.get('name').errors?.required">Name is required</div>
  </div>
  <!-- Repeat for other form controls... -->
  <button type="submit">Submit</button>
</form>

Conclusion:

Handling form submissions and form resets in Angular is crucial for creating interactive and user-friendly applications. By following the steps outlined in this blog post and utilizing Angular’s Forms module, you can easily manage form submissions, perform actions based on form validity, and enable form resetting. Enhance your Angular forms by incorporating validation error messages to provide a seamless user experience. Happy form handling!

Finally, for more such posts, please follow our LinkedIn page- FrontEnd Competency.