Angular 11 自定义 ISBN 验证器响应式表单

Posted

技术标签:

【中文标题】Angular 11 自定义 ISBN 验证器响应式表单【英文标题】:Angular 11 Custom ISBN Validator Reactive Forms 【发布时间】:2022-01-23 22:09:59 【问题描述】:

我正在对 ISBN 号码进行自定义验证,我已经拥有检查号码并完美运行的功能,可以通过控制台为我提供响应,但我需要使用自定义验证器来获取视图中的错误表单控件,在此步骤中,当我编写 ISBN 编号时,此错误会显示在控制台中,就像它检查错误但它不知道何时正确,它应该将空响应作为正确的 ISBN 编号,至少这就是我在一些例子中看到的。

core.js:6210 ERROR TypeError: Cannot read properties of null (reading 'CheckDigit')
at LibrosComponent_Template (libros.component.html:22)
at executeTemplate (core.js:9600)
at refreshView (core.js:9466)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)
at refreshView (core.js:9516)
at refreshEmbeddedViews (core.js:10591)
at refreshView (core.js:9490)
at refreshComponent (core.js:10637)
at refreshChildComponents (core.js:9263)

这是我的打字稿,

export class LibrosComponent implements OnInit 

 //ISBN Validator
 isbnValue: string = ""
 
 firstFormGroup: FormGroup;
 secondFormGroup: FormGroup;

  constructor(
   private _formBuilder: FormBuilder,
 ) 

 ngOnInit() 
   this.firstFormGroup = this._formBuilder.group(
     tituloControl: ['', Validators.required],
     isbnControl: ['', Validators.required],
   ,
    validator: this.isbnValidate );    
 
 
 isbnValidate(g: FormGroup) 
     var isbnValue = g.get('isbnControl').value
     var subject = isbnValue;

     // Checks for ISBN-10 or ISBN-13 format
   var regex = /^(?:ISBN(?:-1[03])?:? )?(?=[0-9X]10$|(?=(?:[0-9]+[- ])3)[- 0-9X]13$|97[89][0-9]10$|(?=(?:[0-9]+[- ])4)[- 0-9]17$)(?:97[89][- ]?)?[0-9]1,5[- ]?[0-9]+[- ]?[0-9]+[- ]?[0-9X]$/;

   if (regex.test(subject)) 
       // Remove non ISBN digits, then split into an array
       var chars = subject.replace(/[- ]|^ISBN(?:-1[03])?:?/g, "").split("");
       // Remove the final ISBN digit from `chars`, and assign it to `last`
       var last = chars.pop();
       var sum = 0;
       var check, i;

       if (chars.length == 9) 
           // Compute the ISBN-10 check digit
           chars.reverse();
           for (i = 0; i < chars.length; i++) 
               sum += (i + 2) * parseInt(chars[i], 10);
           
           check = 11 - (sum % 11);
           if (check == 10) 
               check = "X";
            else if (check == 11) 
               check = "0";
           
        else 
           // Compute the ISBN-13 check digit
           for (i = 0; i < chars.length; i++) 
               sum += (i % 2 * 2 + 1) * parseInt(chars[i], 10);
           
           check = 10 - (sum % 10);
           if (check == 10) 
               check = "0";
           
       

       if (check != last) 
         return null;
           
        else 
         return  g.get('isbnControl').setErrors( CheckDigit: true )
           
       
      else 
       return g.get('isbnControl').setErrors( Invalid: true );
   

 

在我的 HTML 中,我有一些包含在表单中的输入:

<form class="form" [formGroup]="firstFormGroup">  
          <div class="container-1">
            <mat-form-field class="width">
              <mat-label>Título</mat-label>
              <input matInput formControlName="tituloControl" required>
            </mat-form-field>

            <mat-form-field class="width">
                <mat-label>ISBN</mat-label>
                <input matInput formControlName="isbnControl" required>
                <mat-error *ngIf="firstFormGroup.controls['isbnControl'].pristine || firstFormGroup.controls.isbnControl.errors['CheckDigit']">Invalid ISBN check digit</mat-error>
                <mat-error *ngIf="firstFormGroup.controls['isbnControl'].pristine || firstFormGroup.controls.isbnControl.errors['Invalid']">Invalid ISBN</mat-error>
            </mat-form-field>
</form>

【问题讨论】:

您能再解释一下您的问题吗?您是否希望编写自定义验证器并将 null 输入验证为有效? 我希望编写一个自定义验证器来验证 isbn 编号并使用 mat-error 显示错误 【参考方案1】:

我已经找到了错误的解决方法,将.errors['']替换为hasError(''),.errors[]是读取包含验证错误的对象的属性。但首先我必须使用 hasError () 方法评估该属性是否存在才能访问它。

【讨论】:

以上是关于Angular 11 自定义 ISBN 验证器响应式表单的主要内容,如果未能解决你的问题,请参考以下文章

Angular 反应式表单自定义控件异步验证

如何根据 Angular 2 中的自定义验证规则显示错误消息?

如何使用 Angular + Spring + JSON 自定义登录/身份验证

Angular 11异步验证器触发真实响应的无限循环请求

流明自定义验证响应

如何使用 Angular 重置自定义表单控件