• Template driven forms
• Reactive forms

Angular provides some built-in validators that can be used for template driven forms and reactive forms.

Built-in validators are:

Example of the built-in validator:

First, we need to import FormsModule in the application from the ‘@angular/forms’ library.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

After that, we can use the built-in validator in the form.

If we use Reactive form, we need to import the ReactiveFormsModule in the application from the ‘@angular/forms’ library.

We can use FormGroup and FormControl to build the form.

We can also use the FormBuilder.

We will still need to integrate the form model into DOM using the directive.

Angular provides some built-in validators but it is not used for all cases. We can create a custom validator for our use cases. We can create the custom validator using Reactive forms and Template driven forms.

Validator for the Template driven form

Directives are used in the template driven form.

First, we need to import Validator from the ‘@angular/forms’ library. We need to register and add the validator in the @Directive array NG_VALIDATORS which is provided by the Angular framework.

In this example, it will return an object if the validation is not passed that is {‘phoneNumberInvalid’: true} and if the validation is passed it will return null.

Validator for the Reactive form:

We have to create a function for validation in the reactive form.

We can add the function in the validators array of the FormControl.

The Angular framework supports some control properties into the form control element as CSS classes. We can use these classes to style the form elements. There are some following classes are supported.