How to use ngx-validators - 10 common examples

import { EmailValidators } from 'ngx-validators';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reactive-email-validator',
  templateUrl: './email-validator.component.html',
  styleUrls: ['./email-validator.component.css']
})
export class ReactiveFormEmailValidatorComponent implements OnInit {

  form: FormGroup;
  email = new FormControl('', Validators.compose([EmailValidators.normal]));
  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {
    this.form = this._fb.group({
      'email': this.email,
    });
  }

}

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { EmailValidators } from 'ngx-validators';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reactive-email',
  templateUrl: './reactive-form-email.component.html'
})
export class ReactiveFormEmailComponent implements OnInit {

  form: FormGroup;
  email = new FormControl('', Validators.compose([EmailValidators.normal]));
  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {
    this.form = this._fb.group({
      'email': this.email,
    });
  }

  addToForm(email) {
    this.form.get('email').setValue(email);
  }
}

templateUrl: './phone-validator.component.html',
  styleUrls: ['./phone-validator.component.css']
})
export class ReactiveFormPhoneValidatorComponent implements OnInit {
  form: FormGroup;
  countryCode: FormControl = new FormControl('', Validators.compose([
    Validators.required,
    PhoneValidators.isValidRegionCode
  ]));
  possiblePhone: FormControl = new FormControl('', Validators.compose([
    Validators.required,
    PhoneValidators.isPossibleNumberWithReason('ZZ')
  ]));
  phone: FormControl = new FormControl('', Validators.compose([
    Validators.required,
    PhoneValidators.isPhoneNumber('ZZ')
  ]));


  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {

    this.form = this._fb.group({
      'possiblePhone': this.possiblePhone,
      'phone': this.phone,
      'countryCode': this.countryCode
    });

    this.countryCode.valueChanges.subscribe(data => {
      this.phone.setValidators(
        Validators.compose([

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reactive-phone-validator',
  templateUrl: './phone-validator.component.html',
  styleUrls: ['./phone-validator.component.css']
})
export class ReactiveFormPhoneValidatorComponent implements OnInit {
  form: FormGroup;
  countryCode: FormControl = new FormControl('', Validators.compose([
    Validators.required,
    PhoneValidators.isValidRegionCode
  ]));
  possiblePhone: FormControl = new FormControl('', Validators.compose([
    Validators.required,
    PhoneValidators.isPossibleNumberWithReason('ZZ')
  ]));
  phone: FormControl = new FormControl('', Validators.compose([
    Validators.required,
    PhoneValidators.isPhoneNumber('ZZ')
  ]));


  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {

    this.form = this._fb.group({
      'possiblePhone': this.possiblePhone,
      'phone': this.phone,
      'countryCode': this.countryCode
    });

import { CreditCardValidators } from 'ngx-validators';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reactive-creditcard-validator',
  templateUrl: './creditcard-validator.component.html',
  styleUrls: ['./creditcard-validator.component.css']
})
export class ReactiveFormCreditcardValidatorComponent implements OnInit {

  form: FormGroup;
  creditcard = new FormControl('', Validators.compose([CreditCardValidators.isCreditCard]));
  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {
    this.form = this._fb.group({
      'creditcard': this.creditcard,
    });
  }

}

import { PasswordValidators } from 'ngx-validators';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reactive-password-validator',
  templateUrl: './password-validator.component.html',
  styleUrls: ['./password-validator.component.css']
})
export class ReactiveFormPasswordValidatorComponent implements OnInit {

  form: FormGroup;
  value: string;
  password = new FormControl('', Validators.compose([
    //Validators.required,
    PasswordValidators.repeatCharacterRegexRule(4),
    PasswordValidators.alphabeticalCharacterRule(1),
    PasswordValidators.digitCharacterRule(1),
    PasswordValidators.lowercaseCharacterRule(1),
    PasswordValidators.uppercaseCharacterRule(1),
    PasswordValidators.specialCharacterRule(1)
  ]));
  confirmPassword = new FormControl('');

  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {
    this.form = this._fb.group({
      'newPassword': this.password,
      'confirmPassword': this.confirmPassword
    });

    this.form.setValidators(PasswordValidators.mismatchedPasswords());

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reactive-password-validator',
  templateUrl: './password-validator.component.html',
  styleUrls: ['./password-validator.component.css']
})
export class ReactiveFormPasswordValidatorComponent implements OnInit {

  form: FormGroup;
  value: string;
  password = new FormControl('', Validators.compose([
    //Validators.required,
    PasswordValidators.repeatCharacterRegexRule(4),
    PasswordValidators.alphabeticalCharacterRule(1),
    PasswordValidators.digitCharacterRule(1),
    PasswordValidators.lowercaseCharacterRule(1),
    PasswordValidators.uppercaseCharacterRule(1),
    PasswordValidators.specialCharacterRule(1)
  ]));
  confirmPassword = new FormControl('');

  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {
    this.form = this._fb.group({
      'newPassword': this.password,
      'confirmPassword': this.confirmPassword
    });

    this.form.setValidators(PasswordValidators.mismatchedPasswords());
  }

@Component({
  selector: 'app-reactive-password-validator',
  templateUrl: './password-validator.component.html',
  styleUrls: ['./password-validator.component.css']
})
export class ReactiveFormPasswordValidatorComponent implements OnInit {

  form: FormGroup;
  value: string;
  password = new FormControl('', Validators.compose([
    //Validators.required,
    PasswordValidators.repeatCharacterRegexRule(4),
    PasswordValidators.alphabeticalCharacterRule(1),
    PasswordValidators.digitCharacterRule(1),
    PasswordValidators.lowercaseCharacterRule(1),
    PasswordValidators.uppercaseCharacterRule(1),
    PasswordValidators.specialCharacterRule(1)
  ]));
  confirmPassword = new FormControl('');

  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {
    this.form = this._fb.group({
      'newPassword': this.password,
      'confirmPassword': this.confirmPassword
    });

    this.form.setValidators(PasswordValidators.mismatchedPasswords());
  }

ngOnInit() {
    this.form = this._fb.group({
      'newPassword': this.password,
      'confirmPassword': this.confirmPassword
    });

    this.form.setValidators(PasswordValidators.mismatchedPasswords());
  }

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { PasswordValidators } from 'ngx-validators';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-reactive-password-validator',
  templateUrl: './password-validator.component.html',
  styleUrls: ['./password-validator.component.css']
})
export class ReactiveFormPasswordValidatorComponent implements OnInit {

  form: FormGroup;
  value: string;
  password = new FormControl('', Validators.compose([
    //Validators.required,
    PasswordValidators.repeatCharacterRegexRule(4),
    PasswordValidators.alphabeticalCharacterRule(1),
    PasswordValidators.digitCharacterRule(1),
    PasswordValidators.lowercaseCharacterRule(1),
    PasswordValidators.uppercaseCharacterRule(1),
    PasswordValidators.specialCharacterRule(1)
  ]));
  confirmPassword = new FormControl('');

  constructor(protected _fb: FormBuilder) { }

  ngOnInit() {
    this.form = this._fb.group({
      'newPassword': this.password,
      'confirmPassword': this.confirmPassword
    });