DEV Community

Prayatna Bhattarai
Prayatna Bhattarai

Posted on • Updated on

TIL: How to add validation on Agular Material form field

I'm using a text area inside a form field from Angular Material components. My view for postMessage component looks something like this:


<form class="post-message-form">
    <mat-form-field class="full-width">
     <textarea matInput [formControl]="messageFormControl" 
            cdkTextareaAutosize cdkAutosizeMinRows="1" 
            maxlength="500" placeholder="What's happening?"> 
           Message is <strong>required</strong>
Enter fullscreen mode Exit fullscreen mode

And on my controller, I initialize the form control with an empty value


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

  selector: 'post-activity',
  templateUrl: './post-activity.component.html',
export class PostActivityComponent implements OnInit {
  messageFormControl = new FormControl('' 

  constructor() { }

  ngOnInit(): void {
    //other code
Enter fullscreen mode Exit fullscreen mode

Here, I have declared a form control as messageFormControl and added a built-in required validation. The form control takes validation as an array; so for example, if I want to add an email validation then it will look something like

messageFormControl = new FormControl('' 
Enter fullscreen mode Exit fullscreen mode

You can also add your own custom validation on the array but might create a separate post for that.

That's all for today.

Top comments (0)