角度9材质v9错误RangeError：超出最大调用堆栈大小

问题描述

我正在使用Angular 9上的自定义验证器-

我想做的是，我正在验证信用卡，如果无效，请设置自定义验证消息，如果有效，则删除验证消息。很简单。

HTML-

<form [formGroup]="paymentAccountDetails" class="create-form">
   <mat-grid-tile>
          <mat-form-field class="width-80-percent">
            <input matInput placeholder="Card Number" pattern="[0-9]{4}\s[0-9]{4}\s[0-9]{4}\s[0-9]{4}\s[0-9]{4}\s" maxlength="20" formControlName="cardNumber" (ngModelChange)="myCardChange($event)" [ngModel]="cardNumber">
            <!-- <mat-error *ngIf="!isCardValid">
              Invalid card number 1
            </mat-error> -->
            <mat-error *ngIf="paymentAccountDetails.get('cardNumber').errors.AllTypeCardValidator">
              Invalid card number
            </mat-error>
          </mat-form-field>
          <i class="card ccs ccs-{{type?.card?.type}}" style="float:right;font-size: 30px;width: 28px;margin-bottom: 2%;"></i>
        </mat-grid-tile>
</form>

Typestript文件-

import * as _moment from 'moment';
import * as cardValidator from 'card-validator';

import { AbstractControl,FormBuilder,FormControl,FormGroup,Validators } from '@angular/forms';
import { ActivatedRoute,Router } from '@angular/router';
import { Component,OnInit } from '@angular/core';
import {DateAdapter,MAT_DATE_FORMATS,MAT_DATE_LOCALE} from '@angular/material/core';
import {MAT_MOMENT_DATE_ADAPTER_OPTIONS,MomentDateAdapter} from '@angular/material-moment-adapter';
import {MatDatepicker,MatDatepickerInputEvent} from '@angular/material/datepicker';
// tslint:disable-next-line:no-duplicate-imports
import {Moment,default as _rollupMoment} from 'moment';
import {map,startWith} from 'rxjs/operators';

import { AccountService } from '../account.service';
import { AlertService } from '../_services/alert.service';
import { AuthenticationService } from '../_services/authentication.service';
import {Observable} from 'rxjs';

const moment = _rollupMoment || _moment;
// tslint:disable-next-line: variable-name
var isValid_Card = false;
// See the Moment.js docs for the meaning of these formats:
// https://momentjs.com/docs/#/displaying/format/
export const MY_FORMATS = {
  parse: {
    dateInput: 'MM/YYYY',},display: {
    dateInput: 'MM/YYYY',monthYearLabel: 'MMM YYYY',dateA11yLabel: 'LL',monthYeara11yLabel: 'MMMM YYYY',};

export class Country {
  States: any;
  constructor(public CountryName: string) {}
}
export class State {
  constructor(public StateName: string) {}
}

@Component({
  selector: 'app-account-payment-auth',templateUrl: './account-payment-auth.component.html',styleUrls: ['./account-payment-auth.component.css'],providers: [
    {
      provide: DateAdapter,useClass: MomentDateAdapter,deps: [MAT_DATE_LOCALE,MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },{provide: MAT_DATE_FORMATS,useValue: MY_FORMATS},]
})
export class AccountPaymentAuthComponent implements OnInit {
  paymentAccountDetails: FormGroup;
  cardNumber: any;
  myCard: any;
  isCardValid: boolean;
  
  constructor(private accountService: AccountService,public fb: FormBuilder,private authenticationService: AuthenticationService,private alertService: AlertService,private router: Router,private route: ActivatedRoute) {
                this.paymentAccountDetails = this.fb.group({
                  cardNumber: ['',[Validators.required,AllTypeCardValidator]],//Validators.pattern('^[ 0-9]*$'),Validators.minLength(19)
                });
                
              }

  ngOnInit() {

  }

  myCardChange(data) {
    //console.log(data);
    if (data !== undefined) {
      this.cardNumber = data.replace(/[^\dA-Z]/g,'').replace(/(.{4})/g,'$1 ').trim();
      console.log(this.cardNumber,data);
      this.type = cardValidator.number(data);
      console.log(this.type);
      const checkCardStatus = this.type;
      if (checkCardStatus.isValid && checkCardStatus.isPotentiallyValid) { //is valid and is potencially valid
        // this.isCardValid = checkCardStatus.isValid;
        console.log('I am valid card!!!');
        isValid_Card = checkCardStatus.isValid;
        this.cvvLength = checkCardStatus.card.code.size;
        console.log(this.cvvLength);
      }
    }
  }


function AllTypeCardValidator(control: AbstractControl): {[key: string]: any} | null {
  const cardDetails = control.value;
  console.log(cardDetails);
  console.log(isValid_Card);

  // Issue here
  // R RangeError: Maximum call stack size exceeded
  // at FormControl._updateControlsErrors

  // const result = cardValidator.number(cardDetails);
  // if (result.isValid && result.isPotentiallyValid) {
  // this.paymentAccountDetails.get('cardNumber').clearValidators();
  // this.paymentAccountDetails.controls.cardNumber.updateValueAndValidity();
  if (isValid_Card) {
    control.setErrors({'firstError': null});
    control.updateValueAndValidity();
    return null;
  } else {
    return { 'AllTypeCardValidator': true };
  }
}

使用Angular材质9的AbstractControl实现存在一个问题。

如果任何人都可以给我快速解决方案或stackbiz链接，这对我将非常有帮助。在哪里可以获得如何设置自定义验证程序错误消息并通过动态方式将其删除。似乎AbstractControl在这里不太合适。 -

角材料9.2

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）