/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import {Directive, Input, OnChanges, SimpleChanges, StaticProvider, forwardRef} from '@angular/core'; import {Observable} from 'rxjs'; import {AbstractControl} from '../model'; import {NG_VALIDATORS, Validators} from '../validators'; /** * @description * Defines the map of errors returned from failed validation checks * * @publicApi */ export type ValidationErrors = { [key: string]: any }; /** * @description * An interface implemented by classes that perform synchronous validation. * * @usageNotes * * ### Provide a custom validator * * The following example implements the `Validator` interface to create a * validator directive with a custom error key. * * ```typescript * @Directive({ * selector: '[customValidator]', * providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}] * }) * class CustomValidatorDirective implements Validator { * validate(control: AbstractControl): ValidationErrors|null { * return {'custom': true}; * } * } * ``` * * @publicApi */ export interface Validator { /** * @description * Method that performs synchronous validation against the provided control. * * @param c The control to validate against. * * @returns A map of validation errors if validation fails, * otherwise null. */ validate(control: AbstractControl): ValidationErrors|null; /** * @description * Registers a callback function to call when the validator inputs change. * * @param fn The callback function */ registerOnValidatorChange?(fn: () => void): void; } /** * @description * An interface implemented by classes that perform asynchronous validation. * * @usageNotes * * ### Provide a custom async validator directive * * The following example implements the `AsyncValidator` interface to create an * async validator directive with a custom error key. * * ```typescript * import { of as observableOf } from 'rxjs'; * * @Directive({ * selector: '[customAsyncValidator]', * providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: CustomAsyncValidatorDirective, multi: * true}] * }) * class CustomAsyncValidatorDirective implements AsyncValidator { * validate(control: AbstractControl): Observable { * return observableOf({'custom': true}); * } * } * ``` * * @publicApi */ export interface AsyncValidator extends Validator { /** * @description * Method that performs async validation against the provided control. * * @param c The control to validate against. * * @returns A promise or observable that resolves a map of validation errors * if validation fails, otherwise null. */ validate(control: AbstractControl): Promise|Observable; } export const REQUIRED_VALIDATOR: StaticProvider = { provide: NG_VALIDATORS, useExisting: forwardRef(() => RequiredValidator), multi: true }; export const CHECKBOX_REQUIRED_VALIDATOR: StaticProvider = { provide: NG_VALIDATORS, useExisting: forwardRef(() => CheckboxRequiredValidator), multi: true }; /** * A Directive that adds the `required` validator to any controls marked with the * `required` attribute, via the `NG_VALIDATORS` binding. * * @usageNotes * ### Example * * ``` * * ``` * * @ngModule FormsModule * @ngModule ReactiveFormsModule * @publicApi */ @Directive({ selector: ':not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]', providers: [REQUIRED_VALIDATOR], host: {'[attr.required]': 'required ? "" : null'} }) export class RequiredValidator implements Validator { // TODO(issue/24571): remove '!'. private _required !: boolean; // TODO(issue/24571): remove '!'. private _onChange !: () => void; @Input() get required(): boolean|string { return this._required; } set required(value: boolean|string) { this._required = value != null && value !== false && `${value}` !== 'false'; if (this._onChange) this._onChange(); } validate(control: AbstractControl): ValidationErrors|null { return this.required ? Validators.required(control) : null; } registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } } /** * A Directive that adds the `required` validator to checkbox controls marked with the * `required` attribute, via the `NG_VALIDATORS` binding. * * @usageNotes * ### Example * * ``` * * ``` * * @publicApi * @ngModule FormsModule * @ngModule ReactiveFormsModule */ @Directive({ selector: 'input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]', providers: [CHECKBOX_REQUIRED_VALIDATOR], host: {'[attr.required]': 'required ? "" : null'} }) export class CheckboxRequiredValidator extends RequiredValidator { validate(control: AbstractControl): ValidationErrors|null { return this.required ? Validators.requiredTrue(control) : null; } } /** * Provider which adds `EmailValidator` to `NG_VALIDATORS`. */ export const EMAIL_VALIDATOR: any = { provide: NG_VALIDATORS, useExisting: forwardRef(() => EmailValidator), multi: true }; /** * A Directive that adds the `email` validator to controls marked with the * `email` attribute, via the `NG_VALIDATORS` binding. * * @usageNotes * ### Example * * ``` * * * * ``` * * @publicApi * @ngModule FormsModule * @ngModule ReactiveFormsModule */ @Directive({ selector: '[email][formControlName],[email][formControl],[email][ngModel]', providers: [EMAIL_VALIDATOR] }) export class EmailValidator implements Validator { // TODO(issue/24571): remove '!'. private _enabled !: boolean; // TODO(issue/24571): remove '!'. private _onChange !: () => void; @Input() set email(value: boolean|string) { this._enabled = value === '' || value === true || value === 'true'; if (this._onChange) this._onChange(); } validate(control: AbstractControl): ValidationErrors|null { return this._enabled ? Validators.email(control) : null; } registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } } /** * @publicApi */ export interface ValidatorFn { (control: AbstractControl): ValidationErrors|null; } /** * @publicApi */ export interface AsyncValidatorFn { (control: AbstractControl): Promise|Observable; } /** * Provider which adds `MinLengthValidator` to `NG_VALIDATORS`. * * @usageNotes * ### Example: * * {@example common/forms/ts/validators/validators.ts region='min'} */ export const MIN_LENGTH_VALIDATOR: any = { provide: NG_VALIDATORS, useExisting: forwardRef(() => MinLengthValidator), multi: true }; /** * A directive which installs the `MinLengthValidator` for any `formControlName`, * `formControl`, or control with `ngModel` that also has a `minlength` attribute. * * @ngModule FormsModule * @ngModule ReactiveFormsModule * @publicApi */ @Directive({ selector: '[minlength][formControlName],[minlength][formControl],[minlength][ngModel]', providers: [MIN_LENGTH_VALIDATOR], host: {'[attr.minlength]': 'minlength ? minlength : null'} }) export class MinLengthValidator implements Validator, OnChanges { // TODO(issue/24571): remove '!'. private _validator !: ValidatorFn; // TODO(issue/24571): remove '!'. private _onChange !: () => void; // TODO(issue/24571): remove '!'. @Input() minlength !: string; ngOnChanges(changes: SimpleChanges): void { if ('minlength' in changes) { this._createValidator(); if (this._onChange) this._onChange(); } } validate(control: AbstractControl): ValidationErrors|null { return this.minlength == null ? null : this._validator(control); } registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } private _createValidator(): void { this._validator = Validators.minLength(parseInt(this.minlength, 10)); } } /** * Provider which adds `MaxLengthValidator` to `NG_VALIDATORS`. * * @usageNotes * ### Example: * * {@example common/forms/ts/validators/validators.ts region='max'} */ export const MAX_LENGTH_VALIDATOR: any = { provide: NG_VALIDATORS, useExisting: forwardRef(() => MaxLengthValidator), multi: true }; /** * A directive which installs the `MaxLengthValidator` for any `formControlName`, * `formControl`, or control with `ngModel` that also has a `maxlength` attribute. * * @ngModule FormsModule * @ngModule ReactiveFormsModule * @publicApi */ @Directive({ selector: '[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]', providers: [MAX_LENGTH_VALIDATOR], host: {'[attr.maxlength]': 'maxlength ? maxlength : null'} }) export class MaxLengthValidator implements Validator, OnChanges { // TODO(issue/24571): remove '!'. private _validator !: ValidatorFn; // TODO(issue/24571): remove '!'. private _onChange !: () => void; // TODO(issue/24571): remove '!'. @Input() maxlength !: string; ngOnChanges(changes: SimpleChanges): void { if ('maxlength' in changes) { this._createValidator(); if (this._onChange) this._onChange(); } } validate(control: AbstractControl): ValidationErrors|null { return this.maxlength != null ? this._validator(control) : null; } registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } private _createValidator(): void { this._validator = Validators.maxLength(parseInt(this.maxlength, 10)); } } export const PATTERN_VALIDATOR: any = { provide: NG_VALIDATORS, useExisting: forwardRef(() => PatternValidator), multi: true }; /** * A Directive that adds the `pattern` validator to any controls marked with the * `pattern` attribute, via the `NG_VALIDATORS` binding. Uses attribute value * as the regex to validate Control value against. Follows pattern attribute * semantics; i.e. regex must match entire Control value. * * Note: if a string type attribute value is used, the regex will be applied with the * unicode flag on supported browsers. If a unicode-regex is passed, it might break on * unsupported browser. In this case, the user should be responsible to handle the * browser compatibility. * * @usageNotes * ### Example * * ``` * * ``` * * @ngModule FormsModule * @ngModule ReactiveFormsModule * @publicApi */ @Directive({ selector: '[pattern][formControlName],[pattern][formControl],[pattern][ngModel]', providers: [PATTERN_VALIDATOR], host: {'[attr.pattern]': 'pattern ? pattern : null'} }) export class PatternValidator implements Validator, OnChanges { // TODO(issue/24571): remove '!'. private _validator !: ValidatorFn; // TODO(issue/24571): remove '!'. private _onChange !: () => void; // TODO(issue/24571): remove '!'. @Input() pattern !: string | RegExp; ngOnChanges(changes: SimpleChanges): void { if ('pattern' in changes) { this._createValidator(); if (this._onChange) this._onChange(); } } validate(control: AbstractControl): ValidationErrors|null { return this._validator(control); } registerOnValidatorChange(fn: () => void): void { this._onChange = fn; } private _createValidator(): void { this._validator = Validators.pattern(this.pattern); } }