Creating and using a custom validator

The basic built-in validators that Angular provides will get you off the ground, but if your application relies on forms, you will undoubtedly come to a point where you will want to define your own validator logic.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/8574/.

Getting ready

Suppose you had started with the following skeleton application:

[app/article-editor.component.ts] 
 
import {Component} from '@angular/core'; 
import {FormControl, Validators} from '@angular/forms'; 
 
@Component({ 
  selector: 'article-editor', 
  template: ` 
    <h2>Psych Study on Humility Wins Major Award</h2> 
    <textarea [formControl]="bodyControl" 
              placeholder="Article text"></textarea> 
    <p><button (click)="saveArticle()">Save</button></p> 
  ` 
}) 
export class ArticleEditorComponent...