Question

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

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

因此验证就像所有输入都是空白或所有输入都必须具有值，如果所有输入都有值，则应检查有效卡输入验证检查（对于卡号和到期检查，我计划进行第三方npm模块）。 / p>

我从其他堆栈溢出帖子的引用开始就是这样的：

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

这里有一些错误：

在函数(): ValidatorFn
对于群组需要使用{ validators: OneFilledOutValidator }

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

角度自定义验证器null以及自定义验证检查

1 个答案: