Проверка кредитной карты в угловой реактивной форме

Question

Как проверить номер кредитной карты в зависимости от типа кредитной карты. Я разрабатываю форму, в которой у меня есть два поля Тип кредитной карты и Номер кредитной карты. Как проверить номер кредитной карты в зависимости от типа кредитной карты. Я знаю о настраиваемом валидаторе, который нужно применить к полю creditcardnumber и подтвердить с помощью регулярного выражения, но когда пользователь меняет тип кредитной карты, валидатор creditcardnumber не будет вызывать. Я не хочу устанавливать валидатор на уровне FormGroup, потому что моя форма содержит более 50 свойств, и это узкое место в производительности (я считаю). Есть ли альтернативный способ добиться этого.

Пожалуйста помоги.

Answer 1

Также базовая проверка может быть выполнена с помощью алгоритма Луна.

Он не предназначен для использования в качестве криптографически безопасной хеш-функции; он был разработан для защиты от случайных ошибок, а не от злонамеренных атак. Большинство кредитных карт и многие государственные идентификационные номера используют алгоритм как простой метод отличия действительных номеров от ошибочно набранных или иным образом неверных.

https://en.wikipedia.org/wiki/Luhn_algorithm

function isValid(digits) {
    let sum = 0;

    for (let i = 0; i < digits.length; i++) {
        let cardNum = parseInt(digits[i]);

        if ((digits.length - i) % 2 === 0) {
            cardNum = cardNum * 2;

            if (cardNum > 9) {
                cardNum = cardNum - 9;
            }
        }

        sum += cardNum;
    }

    return sum % 10 === 0;
}

Answer 2

Это может быть достигнуто через RxwebValidators.

Пожалуйста, следуйте ниже шагов:

1. npm install @ rxweb / реактивная форма-валидаторы
2. импортируйте RxReactiveFormsModule в ваш корневой модуль.
3. добавьте валидатор кредитной карты в поле CreditCardNumber FormControl и укажите имя поля типа кредитной карты. например: creditCard:['',RxwebValidators.creditCard ({fieldName:'cardType'})]

вот код компонента.

  ngOnInit(){
    this.userFormGroup = this.formBuilder.group({
      cardType:['Visa'],
      creditCard:['',RxwebValidators.creditCard ({fieldName:'cardType'})]
    })
  }

посмотрите рабочий пример на stackblitz

Answer 3

Вы можете упростить свои вещи, используя некоторые пакеты npm, https://www.npmjs.com/package/ngx-credit-cards

Answer 4

Сформируйте https://angular.io/guide/form-validation:

По умолчанию все валидаторы запускаются после каждого изменения значения формы... Мы можем отложить обновление срока действия формы, изменив свойство updateOn с изменения (по умолчанию) на отправку или размытие

После этого вы можете изменить валидацию с помощью setValidators, применяя только изменения карты.

this.form.get('cardType').valueChanges.subscribe(cardType=> {
      switch (cardType)
      {
          case 1:
             this.form.get('cardNumber').setValidators(.....);
             break;
          ...
      }

      this.form.get('cardNumber').updateValueAndValidity();
});

Или создайте customValidator, который получает два значения (cardType и cardNumber)

customValidator2(params: any) {
    return (control: AbstractControl) => {
      let form=control.parent;
      if (form)
      {
        let cardType=form.get('cardType').value;
        let cardNumber=form.get('cardNumber').value;
        switch (cardType)
        {
              case 1:
                 ....
                 break;
         }
      return null;
    }
  }

Или создайте customValidator на уровне формы: https://angular.io/guide/form-validation