Create Input, Textarea, Select, Radio Button, Checkbox field and Button in Angular Material

Posted at: April 12, 2019 4:33 PM

In this lesson we will learn, how to create input field, textarea field, select field, checkbox, radio button, button and toggle button in Angular Material. And also we learn how to use ngModel and change event in checkbox and radio button. And use two way data binding in select fields. And how to show a validation error message and hint message in Angular Material.

Import Angular Material Module.

Import angular material module in your own NgModule.

MatCheckboxModule: This module import for creating checkbox

MatRadioModule: This module import for creating radio button

MatFormFieldModule: This component uses for creating form field. Its contain input field. This is use of style such as floating label, hint, error message etc.

MatInputModule: This module import for creating input and textarea field

MatSelectModule: This module import for creating select field

MatButtonModule: This module import for creating button

MatButtonToggleModule: This module import for creating toggle button

Above these are modules import and export in your own NgModule

material-design/material-design.module.ts


import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  MatCheckboxModule,
  MatRadioModule,
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  MatButtonModule,
  MatButtonToggleModule,
} from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatRadioModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatButtonModule,
    MatButtonToggleModule
  ],
  exports: [
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatRadioModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatButtonModule,
    MatButtonToggleModule
  ]
})
export class MaterialDesignModule { }
Copy

Import NgModule MaterialDesignModule

Import this NgModule MaterialDesignModule wherever you would like to use the Angular Material components. For example import in AppModule

Also import FormsModule, ReactiveFormsModule into app.module.ts for NgModel and FormController

src/app/app-module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialDesignModule } from './material-design/material-design.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    CheckboxRadioExampleComponent,
    FormFieldExampleComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialDesignModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Copy

src/app/app.component.ts


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-material';

  checked = false;
  disabled = false;
  favouriteCity = 'Mumbai';

  cities = ['New Delhi', 'Mumbai', 'Kolkata', 'Chennai'];
  selected = 'Mumbai';

  emailFormControl = new FormControl('', [
    Validators.required,
    Validators.email
  ]);

  selectedButton: string;

  onChange(event) {
    console.log(event);
  }
}
Copy

Use in HTML

src/app/app.component.html


<div style="container">
  <h1>Welcome to {{ title }}!</h1>
  <form>
    <mat-checkbox
      [(ngModel)]="checked"
      name="city"
      value="New Delhi"
      color="primary"
      [disabled]="disabled"
      labelPosition="after"
      (change)="onChange($event)"
      >New Delhi
    </mat-checkbox>

    <h2 *ngIf="checked">show some thing here...</h2>

    <h2>Cities</h2>
    <mat-radio-group
      [(ngModel)]="favouriteCity"
      value="favouriteCity"
      name="city"
      (change)="onChange($event)"
      [disabled]="disabled"
      labelPosition="after"
      >
        <mat-radio-button
          *ngFor="let city of cities" [value]="city" color="primary"
          >{{city}}
        </mat-radio-button>
    </mat-radio-group>

    <h2>Your favourite city is: {{ favouriteCity }}</h2>

    <mat-form-field class="form-field">
      <mat-label>Name</mat-label>
      <input matInput placeholder="Name">
      <mat-hint>Name must be alphabet</mat-hint>
    </mat-form-field>

    <mat-form-field class="form-field">
      <input matInput maxlength="6" placeholder="Zip Code" #zipcode />
      <mat-hint align="end">{{zipcode.value.length}}/6</mat-hint>
    </mat-form-field>

    <mat-form-field class="form-field">
      <textarea matInput placeholder="Message" maxlength="200" #message></textarea>
      <mat-hint align="start">Leave your message</mat-hint>
      <mat-hint align="end">{{message.value.length}}/200</mat-hint>
    </mat-form-field>

    <mat-form-field class="form-field">
      <input matInput placeholder="Email" [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.hasError('required')">
        Email is required
      </mat-error>
      <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
        Please enter a valid email address
      </mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Select city</mat-label>
      <mat-select [(value)]="selected">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let city of cities" [value]="city">{{city}}</mat-option>
      </mat-select>
    </mat-form-field>
    <h2>Selected city: {{ selected }}</h2>

    <button mat-button>Submit</button>
    <button mat-button color="primary">Submit</button>
    <button mat-raised-button color="primary">Submit</button>
    <button mat-stroked-button color="accent">Submit</button>
    <button mat-flat-button color="warn">Submit</button>
    <button mat-fab color="primary">Submit</button>
    <button mat-mini-fab color="primary">+</button>
    <h2>Toggle Button</h2>
    <mat-button-toggle-group name="txtFormat" [(ngModel)]="selectedButton">
      <mat-button-toggle value="bold">Bold</mat-button-toggle>
      <mat-button-toggle value="italic">Italic</mat-button-toggle>
      <mat-button-toggle value="underline">Underline</mat-button-toggle>
    </mat-button-toggle-group>

    <p *ngIf="selectedButton=='bold'" [style.fontWeight]="selectedButton">This is paragraph: {{selectedButton}}</p>
    <p *ngIf="selectedButton=='italic'" [style.fontStyle]="selectedButton">This is paragraph: {{selectedButton}}</p>
    <p *ngIf="selectedButton=='underline'" [style.textDecoration]="selectedButton">This is paragraph: {{selectedButton}}</p>
  </form>
</div>

<router-outlet></router-outlet>
Copy

src/styles.css


/* You can add global styles to this file, and also import other style files */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
.container { width:80%; margin: auto;}
.form-field { width:400px; display: block !important;}
button { margin-right: 10px !important;}
Copy

Conclusion

We have learnt this lesson for creating input, textarea, select, radio button, checkbox, button and toggle button. And we have used ngModel and change event on radio button and checkbox. And validate email and show validation error message and hint message in Angular Material.

Input Field Select Field Textarea Radio Button Checkbox Button Toggle Button Email Validation Hint Message

Please leave comments

0 Comments