Creating a form in Angular using Angular Material

Creating a form in Angular using Angular Material involves several steps, including setting up your Angular project, installing Angular Material, and then building your form with various form controls. Angular Material provides a wide range of UI components that follow Material Design principles, making it easy to create beautiful, responsive, and functional forms. Below is a basic guide on how to create a simple Angular form with Angular Material.

1. Setting Up Your Angular Project

If you haven’t already created an Angular project, you can do so by running the following command in your terminal:

ng new my-angular-project

Navigate to your project directory:

cd my-angular-project

2. Installing Angular Material

Install Angular Material and Angular CDK (Component Dev Kit) in your project by running:

ng add @angular/material

During the installation process, you can choose a prebuilt theme or set up global typography and animations.

3. Importing Angular Material Modules

Before using Angular Material components, you need to import the respective modules in your app module (app.module.ts). For a simple form, you might need MatInputModule for input fields and MatButtonModule for buttons. You can also import MatFormFieldModule for form fields.

Here is how you can import these modules:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    // other components
  ],
  imports: [
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    // other modules
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Creating a Form

You can use the Angular Material components to create your form. Here is a simple example using mat-form-field and mat-input for input fields:

<form>
  <mat-form-field appearance="fill">
    <mat-label>First Name</mat-label>
    <input matInput placeholder="Enter your first name">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Last Name</mat-label>
    <input matInput placeholder="Enter your last name">
  </mat-form-field>

  <button mat-raised-button color="primary">Submit</button>
</form>

5. Adding Form Control and Validation

For handling form control and validation, you can use Angular’s ReactiveFormsModule or FormsModule. Here is how you might add form control using FormControl:

Import ReactiveFormsModule in your app module (app.module.ts):

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other modules
    ReactiveFormsModule
  ],
})
export class AppModule { }

Update your component to use FormControl:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  firstName = new FormControl('');
  lastName = new FormControl('');
}

And modify your template to bind the form controls:

<form>
  <mat-form-field appearance="fill">
    <mat-label>First Name</mat-label>
    <input matInput placeholder="Enter your first name" [formControl]="firstName">
  </mat-form-field>

  <mat-form-field appearance="fill">
    <mat-label>Last Name</mat-label>
    <input matInput placeholder="Enter your last name" [formControl]="lastName">
  </mat-form-field>

  <button mat-raised-button color="primary">Submit</button>
</form>

This guide provides a foundation for creating a form with Angular Material. Depending on your requirements, Angular Material offers many other form controls and functionalities that you can explore and integrate into your forms.

Tags:Angular 17 Angular Material