关键词:
【中文标题】Angular2 - 使用旧数据的自定义验证器【英文标题】:Angular2 - Custom validator using old data 【发布时间】:2017-06-28 23:18:28 【问题描述】:我编写的自定义验证器有问题。验证器用于验证组件中的所有数据。
设置如下:
组件显示一个包含 X 行数据的表格。一些行是仅显示模式,而其他行将处于编辑模式(表中的某些单元格将具有输入、选择等)。支持表格的是一个数据对象数组(tableData)。
如果一行处于编辑模式,则每个输入都双向绑定到 tableData 数组中的相应元素。
我的自定义验证器应用于表单标签并将 tableData 作为输入。一切大部分都有效。验证数据查看表中的每一行,并完成我需要做的所有事情。
问题是基于我的自定义验证器的数据是旧数据。因此,如果一行处于编辑模式,当我更改选择中的值时,tableData 会更新,但传递给验证器的版本是在更新之前。所以我总是在验证旧版本的 tableData。
我不确定如何获得验证以使用最新版本的 tableData。我认为这个问题可能与 select 绑定更改了 tableData 数组中对象的值有关,但 tableData 数组本身实际上并没有改变。
我尝试将回调添加到正在编辑的行中选择的(更改)事件。调用(更改)的方法使用 ChangeDetectorRef 手动触发更改检测,但这不起作用。
我不想用所有的整个文件向每个人发送垃圾邮件,所以我尝试只添加重要的 sn-ps。
这是模板:
<form #f="ngForm" novalidate custom-validator="tableData | json">
<p-dataTable [value]="tableData">
...
<p-column [header]="'Program Name'">
<template let-row="rowData" let-idx="rowIndex" pTemplate type="body">
<span *ngIf="!row['edit']">
row['data'].programName
</span>
<div *ngIf="row['edit']">
<select #progName="ngModel" [(ngModel)]="row['data'].programCode"
title="Select Program" required (change)="onProgramChange($event, idx)"
name="programSelect-idx">
<option [value]=""></option>
<option *ngFor="let prog of programList" [value]="prog.code">
prog.name
</option>
</select>
</div>
</template>
</p-column>
...
</p-dataTable>
</form>
这是支持组件:
//imports...
...
private tableData: PersonAssignmentRowData[] = [];
private programList: Program[] = [];
...
onProgramChange(event: any, index: number)
for(let prog of this.programList)
if(prog.code == event.target.value)
this.tableData[index].data.programAcronym = prog.acronym;
this.tableData[index].data.programLocation = prog.location;
this.tableData[index].data.programName = prog.name;
break;
...
这是验证器:
@Directive(
selector: '[custom-validator]',
providers:[provide: NG_VALIDATORS, useExisting: CustomValidator, multi: true]
)
export class CustomValidator implements Validator
@Input('custom-validator') tableDataString: string;
validate(control: AbstractControl)
if(this.tableDataString == null || this.tableDataString.length == 0)
return null;
let tableData: PersonAssignmentRowData[] = [];
tableData = JSON.parse(this.tableDataString);
let message: string = '';
//logic that tests the validity of the data and sets any error messages in the message variable
if(message.length > 0)
return 'validationMessage': message;
else
return null;
【问题讨论】:
没有代码就不可能弄清楚它有什么问题。 我已经用代码更新了我的问题。 【参考方案1】:现在很清楚了。当然它不会起作用。验证器应该检查的唯一数据源是传递给 validate() 方法的控件。没有 @Inputs() 或任何类似的东西。唯一的区别是下面的 control.value 将包含表单中所有控件的所有值,而不仅仅是您的表格,因此您应该在表格所在的位置选择正确的嵌套值。
@Directive(
selector: '[custom-validator]',
providers:[provide: NG_VALIDATORS, useExisting: forwardRef(() => CustomValidator), multi: true]
)
export class CustomValidator implements Validator
validate(control: AbstractControl)
tableData = control.table.value; // need to figure out exact path based on your form structure
let message: string = '';
//logic that tests the validity of the data and sets any error messages in the message variable
if(message.length > 0)
return 'validationMessage': message;
return null;
【讨论】:
我见过其他接受输入的验证器。我遇到的问题是我需要验证不在控件中的数据,因此我将支持对象作为输入传递。 那是错误的。如果您的数据不受控制,那么您需要这样做,而不是通过其他方式传递数据。如何根据 Angular 2 中的自定义验证规则显示错误消息?
...表单,并且我已经成功创建了可以在模板中使用的自定义验证器。但是,我找不到显示绑定到特定错误的特定错误消息的方法。我想区分为什么表格 查看详情
Angular 2 / Material - 应用到父 FormGroup 的自定义验证器未显示 md 错误
】Angular2/Material-应用到父FormGroup的自定义验证器未显示md错误【英文标题】:Angular2/Material-md-errornotdisplayedwithcustomvalidatorappliedtoparentFormGroup【发布时间】:2018-03-0200:01:12【问题描述】:我在使用Angular(v4.3.6)在模型驱动表单上显示... 查看详情
使用数据注释和代码的自定义验证属性
】使用数据注释和代码的自定义验证属性【英文标题】:Customvalidationattributeusingdataannotationsandcodefirst【发布时间】:2011-08-0316:47:43【问题描述】:我在C#4.0中使用customvalidation属性编写了一个自定义验证方法。我正在使用EntityFramew... 查看详情
使用数据注释的依赖属性的自定义模型验证
】使用数据注释的依赖属性的自定义模型验证【英文标题】:CustommodelvalidationofdependentpropertiesusingDataAnnotations【发布时间】:2010-02-1712:30:50【问题描述】:从现在开始我就使用了出色的FluentValidation库来验证我的模型类。在Web应用... 查看详情
Angular2如何对自定义验证器指令进行单元测试?
】Angular2如何对自定义验证器指令进行单元测试?【英文标题】:Angular2howtounittestacustomvalidatordirective?【发布时间】:2017-02-1820:19:43【问题描述】:我为输入字段编写了一个非常简单的自定义验证器:importDirectivefrom\'@angular/core\';i... 查看详情
如何降级使用 angular2 编写的自定义管道以在 angular 1.5 中使用?
】如何降级使用angular2编写的自定义管道以在angular1.5中使用?【英文标题】:Howtodowngradecustompipewrittenwithangular2tobeusedinangular1.5?【发布时间】:2017-09-2806:17:41【问题描述】:我编写了在Angular2中使用管道的组件。现在我正在尝试降... 查看详情
mongoose 5.7.0 中的自定义验证
...e5.7.0【发布时间】:2020-01-1907:32:05【问题描述】:以前我使用的是旧版本的mongoose,即4.3.7,并且自定义模式验证作为预保存挂钩运行良好。我所要做的就是将错误发送到回调函数。现在升级到最新版本的猫鼬后,相同的验证功... 查看详情
angular 2+ 中的自定义输入类型
】angular2+中的自定义输入类型【英文标题】:Custominputtypesinangular2+【发布时间】:2018-06-1123:07:33【问题描述】:我想为我的Angular2项目使用自定义输入类型(即)<inputtype=\'dob\'>创建自定义验证。我在堆栈溢出中看到了... 查看详情
Angular 2中元素的自定义验证
】Angular2中元素的自定义验证【英文标题】:CustomValidatononanElementinAngular2【发布时间】:2017-12-3018:19:23【问题描述】:我有一个输入元素<inputtype="text"name="password">,它不在任何表单内。如何实现任何自定... 查看详情
jQuery 验证器和使用 AJAX 的自定义规则
】jQuery验证器和使用AJAX的自定义规则【英文标题】:jQueryvalidatorandacustomrulethatusesAJAX【发布时间】:2011-02-0709:01:54【问题描述】:我阅读了您关于jQuery验证器的回复,您在其中概述了一种根据数据库中的值检查用户名的方法。我... 查看详情
如何使用验证“唯一”访问 Laravel 中的自定义文本框名称?
】如何使用验证“唯一”访问Laravel中的自定义文本框名称?【英文标题】:HowaccesscustomtextboxnameinLaravelusingvalidation\'unique\'?【发布时间】:2014-12-2602:07:41【问题描述】:我有一个简单的问题。在我的表单中,我正在创建一个验证... 查看详情
具有客户端验证的自定义数据注释验证属性
】具有客户端验证的自定义数据注释验证属性【英文标题】:Customdataannotationvalidationattributewithclientsidevalidation【发布时间】:2017-12-1307:25:34【问题描述】:我制作了一个自定义数据注释属性,用于验证我的数据库中是否已经存在... 查看详情
springboot验证表单数据并实现数据的自定义验证
...的注解了就开头加在answer那的那个是哈效果,4.controller5.使用thymeleaf的htmlresult.html效果如下 查看详情
Angular2 2方式绑定中同名的自定义输入和输出
】Angular22方式绑定中同名的自定义输入和输出【英文标题】:CustominputandoutputonsamenameinAngular22waybinding【发布时间】:2016-10-1717:26:03【问题描述】:我知道如何修复我的组件,为此组件的输出值使用不同的名称。让我分享我的代码... 查看详情
插入时不调用 Core Data 的自定义验证方法
...间】:2019-01-2417:14:55【问题描述】:我正在快速开发一个使用CoreData的iOS应用程序。我正在尝试实现一些核心数据验证。我还没有任何自定义逻辑,所以我使用模型中的“类定义”设置来让Xcode自动创建NSManagedObject子类。在这种... 查看详情
WCF REST:使用我自己的自定义验证器时加密凭据 - UserNamePasswordValidator?
】WCFREST:使用我自己的自定义验证器时加密凭据-UserNamePasswordValidator?【英文标题】:WCFREST:Encryptingcredentialswhenusingmyowncustomvalidator-UserNamePasswordValidator?【发布时间】:2011-06-1313:18:35【问题描述】:我通过从UserNamePasswordValidator继... 查看详情
如何使用 GoDaddy 在 Firebase 上验证我的自定义域
】如何使用GoDaddy在Firebase上验证我的自定义域【英文标题】:HowcanIverifymycustomdomainonfirebaseusingGoDaddy【发布时间】:2017-03-1813:34:21【问题描述】:我最近在firebase上创建了一个项目来托管我的网站,并将我的数据传输到他们的子域... 查看详情
Laravel 5 中的自定义验证器
】Laravel5中的自定义验证器【英文标题】:CustomvalidatorinLaravel5【发布时间】:2015-04-0916:14:51【问题描述】:我正在将我的Laravel应用程序从4升级到5。但是,我有一个无法使用的自定义验证器。在L4中,我创建了一个validators.php文... 查看详情