@angular/forms#ValidationErrors TypeScript Examples

static greaterThanEquals(firstValue: string, secondValue: string) {
    return (group: FormGroup): ValidationErrors | null => {
      const firstNumber: number = Number(group.controls[firstValue].value);
      const secondNumber: number = Number(group.controls[secondValue].value);

      if (firstNumber == null || secondNumber == null) {
        return null;
      }

      if (firstNumber > secondNumber) {
        return {
          greaterThanEquals: true,
        };
      }

      return null;
    };
  }

defaultAsyncValidators: DynControlAsyncValidator[] = [
  {
    id: 'RELATED',
    fn: (node: DynTreeNode, config: DynControlRelated, validator: ValidatorFn = Validators.required) => {
      return (control: AbstractControl): Observable<ValidationErrors | null> => {
        return node.root.loaded$.pipe(
          first(Boolean),
          switchMap(() => relatedConditionFn(config)(node)),
          map(hasMatch => hasMatch ? validator(control) : null),
          first(),
        );
      }
    }
  },
].map(
  mapPriority<DynControlAsyncValidator>()
)

usernameFeedback: ValidationFeedback = (errors: ValidationErrors) => {
  if (!errors) { return; }
  if (errors.required) {
    return '用户名不能为空！';
  }
  if (errors.pattern) {
    return '用户名只能包含字母/汉字/数字/下划线/横杠！';
  }
  if (errors.minlength || errors.maxlength) {
    return `用户名长度必须在${USERNAME_MIN_LENGTH}~${USERNAME_MAX_LENGTH}位字符之间！`;
  }
  if (errors.legalusername) {
    return '该用户名已被占用！';
  }
}

export function ledgerExists(accountingService: AccountingService): AsyncValidatorFn {
  return (control: AbstractControl): Observable<ValidationErrors | null> => {
    if (!control.dirty || !control.value || control.value.length === 0) {
      return of(null);
    }

    if (isString(control.value) && control.value.trim().length === 0) {
      return invalid;
    }

    return accountingService.findLedger(control.value, true).pipe(
      map(ledger => null),
      catchError(() => invalid),
    );
  };
}

export function afterDateValidator(dateToCompare: Date): ValidatorFn {
  if (!isValid(dateToCompare)) {
    throw new Error('afterDateValidator: dateToCompare is not a valid date');
  }

  return (control: AbstractControl): ValidationErrors | null => {
    const date = parseISO(control.value);

    return !isValid(date) || isAfter(date, dateToCompare)
      ? null
      : {
        afterDate: {
          required: format(dateToCompare, dateFormat),
          actual: format(date, dateFormat),
        },
      };
  };
}

static matchValues(firstValue: string, secondValue: string) {
    return (group: FormGroup): ValidationErrors | null => {
      const val1 = group.controls[firstValue];
      const val2 = group.controls[secondValue];

      if (val1.value !== val2.value) {
        return {
          'mismatch': true,
        };
      }

      return null;
    };
  }

/**
     * A pattern validator based on Angular's `Validators.email` with support for value arrays.
     *
     * @param control The control to validate.
     * @returns The result.
     */
    static emailValidation(control: AbstractControl): ValidationErrors | null {
        if (isEmptyInputValue(control.value)) {
            return null;  // don't validate empty values to allow optional controls
        }

        let values: any[] = [];
        values = processInputValue(control.value);

        for (const value of values) {
            if (!EMAIL_REGEXP.test(value)) {
                return {email: true};
            }
        }

        return null;
    }

verifyTokenValidator(): ValidatorFn {
    return (group: FormGroup): ValidationErrors | null => {
      const invalid = Object.keys(group.controls)
        .map((control) => group.get(control))
        .filter((instance) => instance instanceof FormGroup)
        .find((g) => {
          return g.get('verifyToken').value === 'Verify';
        });
      return invalid ? { tokenVerify: true } : null;
    };
  }

static phone(control: AbstractControl): ValidationErrors | null {
    const error = { phone: true };
    let phoneNumber: PhoneNumber;

    if (!control.value) {
      return error;
    }

    try {
      phoneNumber = PhoneNumberUtil.getInstance().parse(
        control.value.nationalNumber,
        control.value.isoCode
      );
    } catch (e) {
      return error;
    }

    if (!phoneNumber) {
      return error;
    } else {
      if (
        !PhoneNumberUtil.getInstance().isValidNumberForRegion(
          phoneNumber,
          control.value.isoCode
        )
      ) {
        return error;
      }
    }
  }

passwordValidation = (control: FormGroup): ValidationErrors | null => {
  const password = control.get('password')?.value;
  const confirmPassword = control.get('confirmPassword')?.value;
  const error = { passwordsDontMatch: true };

  if (password === null || confirmPassword === null) {
    return error;
  }

  if (password === confirmPassword) {
    return null;
  }
  return error;
}

export function beforeDateValidator(dateToCompare: Date): ValidatorFn {
  if (!isValid(dateToCompare)) {
    throw new Error('beforeDateValidator: dateToCompare is not a valid date');
  }

  return (control: AbstractControl): ValidationErrors | null => {
    const date = parseISO(control.value);

    return !isValid(date) || isBefore(date, dateToCompare)
      ? null
      : {
        beforeDate: {
          required: format(dateToCompare, dateFormat),
          actual: isValid(date)
            ? format(date, dateFormat)
            : control.value,
        },
      };
  };
}

private checkEmail(control: AbstractControl): Observable<ValidationErrors | null> {
    if (control.value && (<string>control.value).trim().length > 0) {
      return of(control.value).pipe(
        delay(500),
        switchMap((email) => this.contactService.doesEmailExist(email).pipe(
          map(emailExists => emailExists ? { emailExists: true } : null)
        ))
      );
    } else {
      return of(null);
    }
  }

export function futureDateValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const date = parseISO(control.value);

    return !isValid(date) || isFuture(parseISO(control.value))
      ? null
      : { futureDate: true };
  };
}

private emailExistsValidator(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      if (!this.contact.id) {
        //if we get here it's a new contact
        return this.checkEmail(control);
      } else {
        //if the user has an ID, that means a duplicate email is okay - it could be the
        //user's original email address
        if (this.originalFormState && this.originalFormState.email == control.value) {
          //if we get here the user has the same email address as always - no conflict
          return of(null);
        } else {
          //the user changed the email address - need to check
          return this.checkEmail(control);
        }
      }
    };
  }

/**
 * Validator for size of file
 * @param max Max of size of file (in bytes)
 */
export function MaxSizeValidator(max: number): ValidatorFn {
    return (ctrl: AbstractControl): ValidationErrors | null => {
        max = Number(max);
        if (isNaN(max)) {
            throw 'MaxSizeValidator: max of size of file is invalid';
        }
        if (!ctrl.value) return null;
        let files: File[] = ctrl.value;
        if (!Array.isArray(ctrl.value)) {
            files = [ctrl.value];
        }
        if(!files.length) return null;
        const add = (a: any, b: any): number => a + b;
        const sumSize = files.map(x => x.size).reduce(add);
        if (sumSize > max) {
            return {
                maxSize: true
            };
        }
        return null;
    }
}

export function pastDateValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const date = parseISO(control.value);

    return !isValid(date) || isPast(date)
      ? null
      : { pastDate: true };
  };
}

export function allowEmptybitcoinAddressValidator(network: string | undefined): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (control.value === '') {
      // console.debug('allowEmptybitcoinAddressValidator() control.value:', control.value)
      // control.markAsUntouched()
      control.markAsPristine()
      return null
    }
    const allowed = validate(control.value, <Network>network)
    return allowed ? null : { addressInvalid: { value: control.value } }
  }
}

versionValidator(appNameControl: AbstractControl): AsyncValidatorFn {
    return (control: AbstractControl): Observable<ValidationErrors> => {
      // if we don't have an app selected, do not validate
      if (!appNameControl.value) {
        return of(null);
      }
      return this.getVersionLog().pipe(
        map((vLog) => {
          const newVersion = control.value;
          const previousVersion = vLog[appNameControl.value];
          // check if the new version is greater than previous version
          return compareVersion(newVersion, previousVersion) === 1
            ? null
            : {
                newVersionRequired: previousVersion,
              };
        })
      );
    };
  }

validate(control: AbstractControl): ValidationErrors {
    if (!this.selectRef.contentOptions || !control.value) {
      return;
    }
    return !this.includes
      ? null
      : AuiSelectValidators.includes(
          this.selectRef.contentOptions
            .filter(option => !option.disabled)
            .map(option => option.value),
          this.trackFn,
        )(control);
  }

/**
 * 
 * @param accept Allowable type of file
 */
export function AcceptValidator(accept: string): ValidatorFn {
    return (ctrl: AbstractControl): ValidationErrors | null => {
        if (!accept) {
            throw ('AcceptValidator: allowable type of file can not be empty');
        }

        if (ctrl.value == null) return null;

        if (!accept.includes(ctrl.value.type)) {
            return {
                accept: true
            };
        }

        return null;

    }
}

export function regexValidator(regex: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const allowed = regex.test(control.value)
    return allowed ? null : { regexInvalid: { value: control.value }}
  }
}

/** @docs-private */
    validate(c: AbstractControl): ValidationErrors | null {
        return this._validator ? this._validator(c) : null;
    }

static email(control: AbstractControl): ValidationErrors | null {
    if (isEmptyInputValue(control.value)) {
      return null;
    }

    return EMAIL_REGEXP.test(control.value) ? null : { 'email': true };
  }

export function bitcoinAddressValidator(network: string | undefined): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const allowed = validate(control.value, <Network>network)
    return allowed ? null : { addressInvalid: { value: control.value } }
  }
}

currencyObjValidator(c: FormControl): ValidationErrors {
    if (c.value && c.value.amount && c.value.currency) {
      return null;
    }
    return {
      required: false,
    };
  }

validate(c: AbstractControl): ValidationErrors | null {
    return this._validator ? this._validator(c) : null;
  }

static isNumber(control: AbstractControl): ValidationErrors | null {
    if (control.value && isNaN(control.value)) {
      return {
        isNumber: true,
      };
    }
    return null;
  }

/** Validators */

function regexValidator(regex: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const allowed = regex.test(control.value)
    return allowed ? null : { regexInvalid: { value: control.value }}
  }
}

validate(control: AbstractControl): ValidationErrors | null {
    return IonIntlTelInputValidators.phone(control);
  }