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:

post-message.component.html

<form class="post-message-form">
    <mat-form-field class="full-width">
     <textarea matInput [formControl]="messageFormControl" 
            cdkTextareaAutosize cdkAutosizeMinRows="1" 
            maxlength="500" placeholder="What's happening?"> 
     </textarea>
     <mat-error 
         *ngIf="messageFormControl.hasError('required')">
           Message is <strong>required</strong>
     </mat-error>
    </mat-form-field>
<form>

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

post-message.component.ts

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

@Component({
  selector: 'post-activity',
  templateUrl: './post-activity.component.html',
})
export class PostActivityComponent implements OnInit {
  messageFormControl = new FormControl('' 
     [Validators.required]);

  constructor() { }

  ngOnInit(): void {
    //other code
  } 
}

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('' 
     [Validators.required, Validators.email]);

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

That's all for today.

Blog

TIL: How to add validation on Agular Material form field

Prayatna Bhattarai

post-message.component.html

post-message.component.ts

Join Our Newsletter. No Spam, Only the good stuff.

Related