Creating a basic Angular form with validation
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.