关键词：
【中文标题】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 () 方法评估该属性是否存在才能访问它。
【讨论】：
流明自定义验证响应
】流明自定义验证响应【英文标题】：lumencustomizevalidationresponse【发布时间】：2017-09-2417:39:32【问题描述】：如果验证在流明中失败，我正在尝试创建自定义响应。但得到默认响应。期待像这样的回应[\'code\'=>406,\'message\'=>"fo... 查看详情
Angular 反应式表单自定义控件异步验证
】Angular反应式表单自定义控件异步验证【英文标题】：Angularreactiveformcustomcontrolasyncvalidation【发布时间】：2020-04-0608:48:11【问题描述】：更新：异步验证问题已成功解决。但是初始验证状态还有另一个问题。查看最新答案。诀窍... 查看详情
如何根据 Angular 2 中的自定义验证规则显示错误消息？
...表单，并且我已经成功创建了可以在模板中使用的自定义验证器。但是，我找不到显示绑定到特定错误的特定错误消息的方法。我想区分为什么表格 查看详情
如何使用 Angular + Spring + JSON 自定义登录/身份验证
】如何使用Angular+Spring+JSON自定义登录/身份验证【英文标题】：HowtocustomLogin/authenticatewithAngular+Spring+JSON【发布时间】：2020-11-2314:22:05【问题描述】：我有一个Angular7前端和Spring后端。我的目标是使用JSON表单进行自定义登录。计划... 查看详情
Angular 11异步验证器触发真实响应的无限循环请求
】Angular11异步验证器触发真实响应的无限循环请求【英文标题】：Angular11asyncvalidatortriggeringendlessloopofrequestsontrueresponse【发布时间】：2021-03-0106:43:34【问题描述】：因此，我正在创建一个带有异步现有用户验证的简单注册表单，... 查看详情
Angular 4：未调用自定义验证器
】Angular4：未调用自定义验证器【英文标题】：Angular4:Customvalidatornotbeingcalled【发布时间】：2018-01-1912:43:25【问题描述】：我已经为泛卡号验证定义了一个自定义验证器（https://en.wikipedia.org/wiki/Permanent_account_number）。functionvalidateP... 查看详情
如何使用 Angular 重置自定义表单控件
】如何使用Angular重置自定义表单控件【英文标题】：HowcanIresetacustomformcontrolwithAngular【发布时间】：2018-11-0921:54:04【问题描述】：我有一个带有验证的自定义表单控件。我在其中使用了一个独立的FormControl来处理值和一些验证。... 查看详情
angular自定义验证器添加入模板驱动表单
创建自定义验证器的命令nggeneratedirectiveforbidden-name(自定义床啊金验证器的名称)生成的文件内容import{Directive}from'@angular/core';@Directive({selector:'[appForbiddenName]'})exportclassForbiddenNameDirective{const 查看详情
angular5+自定义表单验证器
Angular5+自定义表单验证器CustomValidators标签（空格分隔）：Angular首先阐述一下遇到的问题：怎样实现“再次输入密码”的验证（两个controller值相等）（equalTo）怎样反向监听（先输入“再次输入密码”，后输入设置密码）解决思... 查看详情
Angular 4 - 验证器自定义函数这是未定义的
】Angular4-验证器自定义函数这是未定义的【英文标题】：Angular4-validatorcustomfunctionthisisundefined【发布时间】：2018-07-2422:02:34【问题描述】：我正在构建一个应用程序与组件FormComponent。在里面我正在使用来自角核心的反应形式模块... 查看详情
Angular - 将自定义验证器分配给 FormGroup
】Angular-将自定义验证器分配给FormGroup【英文标题】：Angular-assigncustomvalidatortoaFormGroup【发布时间】：2018-12-0804:49:12【问题描述】：我需要将自定义验证器分配给FormGroup。我可以在创建FormGroup时这样做：letmyForm:FormGroup;myForm=this.for... 查看详情
Angular 2 自定义验证单元测试
】Angular2自定义验证单元测试【英文标题】：Angular2Customvalidationunittesting【发布时间】：2017-02-1600:38:15【问题描述】：我正在编写自定义角度（Angular2.0.0）验证，遵循本指南https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-v... 查看详情
将预定义的验证器添加到 Angular 中的自定义组件
】将预定义的验证器添加到Angular中的自定义组件【英文标题】：AddpredefinedvalidatortoacustomcomponentinAngular【发布时间】：2017-10-1008:22:02【问题描述】：我正在开发一个自定义组件，用于Angular中的表单。我正在实现ControlValueAccessor接... 查看详情
Angular2如何对自定义验证器指令进行单元测试？
】Angular2如何对自定义验证器指令进行单元测试？【英文标题】：Angular2howtounittestacustomvalidatordirective?【发布时间】：2017-02-1820:19:43【问题描述】：我为输入字段编写了一个非常简单的自定义验证器：importDirectivefrom\'@angular/core\';i... 查看详情
如何在 Angular 2+ 中添加自定义验证
】如何在Angular2+中添加自定义验证【英文标题】：Howtoaddcustomvalidationsforhandsontableinangular2+【发布时间】：2019-07-1112:55:25【问题描述】：我在Angular6中使用handsontable。我尝试了添加自定义验证的代码，该验证显示在我的Angular6组件... 查看详情
Angular 5 动态表单中的自定义验证器
】Angular5动态表单中的自定义验证器【英文标题】：CustomvalidatorinAngular5dynamicforms【发布时间】：2018-05-2810:54:18【问题描述】：我正在从Angular5中的可配置json创建一个动态表单。一切正常，但我无法为特定字段添加自定义验证器。... 查看详情
自定义 Angular 4 验证器取决于动态值
】自定义Angular4验证器取决于动态值【英文标题】：CustomAngular4Validatordependsondynamicvalue【发布时间】：2018-12-2909:00:55【问题描述】：我必须创建一个自定义验证器validLocation<input[(ngModel)]="search"(change)="searchLocation&quo... 查看详情
Angular4 中的自定义验证
】Angular4中的自定义验证【英文标题】：CustomvalidationinAngular4【发布时间】：2018-07-2918:52:21【问题描述】：在我的页面中，我有一个简单的表单组。我必须在其中为名称编写自定义验证。this.searchForm=this._formBuilder.group(profileName:newF... 查看详情