Angular 自定义验证器 null 加上自定义验证检查

Question

我想检查空验证和信用卡输入检查。

例如：我有 3 个输入字段名称 'card number'、'expiry'、'cvv'。我想要的是默认情况下它是可选的，但如果用户在其中一个字段中输入输入，则用户应在所有 3 个字段中输入有效输入。

所以验证就像所有输入空白或所有输入都必须有值，如果所有都有值，它应该检查有效的卡输入验证检查（对于卡号和到期检查，我正在计划第 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' }

  };
}

但是验证器的 none 正在为我工作。

任何人都可以建议好的起点吗？我该如何实施？
在这个正常的验证之后，我还需要根据卡号、有效期等的普通卡验证来检查卡字段是否真的有效，所以相应地提出建议。

Answer 1

这里有些错误：

在函数中包装验证器 (): ValidatorFn
组需要使用{ validators: OneFilledOutValidator }

此处示例：https://stackblitz.com/edit/angular-gacawd?file=app%2Fapp.component.ts

Angular 自定义验证器 null 加上自定义验证检查

Angular custom validator null plus custom validation checks

angular

angular-reactive-forms

custom-validators

formgroups