Angular
Intro to Reactive Forms in Angular - Validate Forms

Demo: Adding Error Messages

PRO

In this demo, you'll learn how to provide a way for the users to know exactly what field is invalid when they’re filling out the form. I’ve definitely experienced my share of frustrating forms where I don’t know what’s wrong, yet I can’t submit the form. Let’s not do that to our users. To combat that, we’ll add an error message by the invalid form control to tell the user exactly what’s missing or invalid.

An error message could look like this: <span *ngIf="firstName.touched&& firstName.errors.required"> First Name is required! </span>

We'll also make sure to disable the submit form button if the form is invalid by adding the property binding: [disabled]="regForm.invalid"