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.
Top comments (0)