Creating a basic Angular form with validation

  • Post category:Angular
  • Reading time:6 mins read

Angular is a popular framework for building dynamic web applications. One of the most common tasks when building a web application is creating a form that allows users to input and submit data. In this article, we will walk through how to create a basic Angular form with validation.

1. Setting up the Angular Application

The first step is to set up an Angular application. If you haven’t already done so, you can install Angular by running the following command in your terminal:

npm install -g @angular/cli

Once Angular is installed, you can create a new Angular project by running the following command:

ng new my-app

This will create a new Angular application called “my-app” in your current directory.

2. Creating the Form Component

Next, we need to create a new component that will contain our form. We can do this by running the following command:

ng generate component my-form

This will create a new component called “my-form” in our Angular application.

3. Creating the Form Template

Now that we have our form component, we need to create a template for our form. We can do this by editing the “my-form.component.html” file that was generated in the previous step. Here’s an example of a simple form template:

<form (submit)="onSubmit()" [formGroup]="myForm">
  <label>
    Name:
    <input type="text" formControlName="name" />
    <div *ngIf="myForm.controls.name.invalid && (myForm.controls.name.dirty || myForm.controls.name.touched)">
      <div *ngIf="myForm.controls.name.errors.required">Name is required.</div>
    </div>
  </label>
  <label>
    Email:
    <input type="email" formControlName="email" />
    <div *ngIf="myForm.controls.email.invalid && (myForm.controls.email.dirty || myForm.controls.email.touched)">
      <div *ngIf="myForm.controls.email.errors.required">Email is required.</div>
      <div *ngIf="myForm.controls.email.errors.email">Invalid email format.</div>
    </div>
  </label>
  <button type="submit" [disabled]="!myForm.valid">Submit</button>
</form>

In this template, we have created a form with two input fields for name and email, and a submit button. We have also added validation messages that will appear when the user enters invalid data. Notice that we have used Angular’s form validation by adding the “formGroup” directive to the form element and using the “formControlName” directive on each input field.

4. Creating the Form Component Class

Now that we have our form template, we need to create the form component class that will handle the form logic. We can do this by editing the “my-form.component.ts” file that was generated in step 2. Here’s an example of a simple form component class:

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

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

  constructor(private formBuilder: FormBuilder) {
    this.myForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

In this component class, we have imported the necessary Angular modules for form building and validation. We have also created a “myForm” variable that contains our form data and validation rules. In the constructor, we have used the FormBuilder service to create our form group and define our validation rules.

Finally, we have created an “onSubmit” function that will be called when the user clicks the submit button. This function simply logs the form data to the console.

5. Adding the Form Component to the App

The last step is to add our form component to the app. We can do this by editing the “app.component.html” file and adding the following code:

<app-my-form></app-my-form>

This will add our form component to the app.

6. Testing the Form

We can now test our form by running the following command in our terminal:

ng serve

This will start the Angular development server and open our app in a web browser. We can then navigate to the form page and test the form by entering data and clicking the submit button.

If the user enters invalid data, validation messages will appear under the input fields. If the user enters valid data and clicks the submit button, the form data will be logged to the console.

Conclusion

In this article, we have walked through how to create a basic Angular form with validation. We have created a form component, a form template, and a form component class that handles the form logic. We have also tested the form and seen how validation messages appear when the user enters invalid data. With this knowledge, you should now be able to create your own Angular forms with validation for your web applications.

Tags: ,

Leave a Reply