Угловой пользовательский валидатор null плюс пользовательские проверки

Question

Я хочу проверить пустую проверку и проверку входных данных кредитной карты.

Например: у меня есть 3 поля ввода: "номер карты", "срок действия", "cvv". По умолчанию я хочу, чтобы это было необязательно, но если пользователь вводит данные в одно из полей, пользователь должен ввести действительные данные во все 3 поля.

Таким образом, валидация похожа на ввод всех пустых данных или на то, что все входные данные должны иметь значение, и если все они имеют значение, они должны проверить правильность проверки правильности ввода карты (для номера карты и проверки истечения срока действия я планирую модуль сторонних поставщиков npm).

Я начал это с вот так со ссылкой на другие сообщения о переполнении стека:

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

// файл проверки

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' }

  };
}

Но ни один из валидатор не работает для меня.

Кто-нибудь может предложить хорошую отправную точку для этого? Как я могу это реализовать?
После этой обычной проверки мне также нужно будет проверить, действительно ли поля карты действительны, основываясь на общей проверке номера карты, истечении срока действия и т. Д., Поэтому предложите соответственно.

Answer 1

Некоторые ошибки здесь:

1. обернуть валидатор в функцию (): ValidatorFn
2. для группы нужно использовать { validators: OneFilledOutValidator }

Пример здесь: https://stackblitz.com/edit/angular-gacawd?file=app%2Fapp.component.ts