angularangular-reactive-formscustom-validatorsformgroups

Angular custom validator null plus custom validation checks


I want to check empty validation plus the credit card inputs check.

For ex: I have 3 input fields name 'card number','expiry','cvv'. What i want is by default it is optional but if user enters input in the one of the fields user should enter valid input in the all 3 fields.

So validation is like either all input blank or all input must have value and if all have value it should check for the valid card input validation check(For card number and expiry check i am planning for 3rd Party npm module).

I have start it with like this from the reference of other stack overflow posts:

this.myForm = new FormGroup({
      'name': new FormControl(),
      'birthYear': new FormControl(),
      'card': new FormGroup({
        'cardNumber': new FormControl(),
        'expiry': new FormControl(),
        'cvv': new FormControl('',[NoWhitespaceValidator]),
      },OneFilledOutValidator)
    });

//Validation file

import {FormControl, FormGroup, AbstractControl, ValidatorFn} from '@angular/forms';
import {Observable} from 'rxjs/Observable';

export const OneFilledOutValidator = (): ValidatorFn => {

  return (group: FormGroup): {[key: string]: boolean} => {

    const fields = [];

    for (const field in group.controls) {

      if (group.controls.hasOwnProperty(field)) {
        fields.push(group.get(field).value);
      }
    };

    const result = fields.filter(field => !!field);

    const valid = result.length !== 0;
    console.log(valid);
    return valid ? null : {
      oneFilledOut: true
    };
  };
};

export function NoWhitespaceValidator(): ValidatorFn {

  return (control: AbstractControl): { [key: string]: any } => {

    let isWhitespace = (control.value || '').trim().length === 0;
    let isValid = !isWhitespace;
    console.log(isValid);
    return isValid ? null : { 'whitespace': 'value is only whitespace' }

  };
}

But none of the validator is working for me.

Can anyone suggest the good starting point for this? How can I implement this?
After this normal validation I would also need to check the if card fields is really valid based on common card validation of card number, expiry etc so suggest accordingly.


Solution

  • Some errors here:

    1. wrap validator in function (): ValidatorFn
    2. for group need to use { validators: OneFilledOutValidator }

    Example here: https://stackblitz.com/edit/angular-gacawd?file=app%2Fapp.component.ts