Angular2 - 使用旧数据的自定义验证器

     2023-02-22     213

关键词:

【中文标题】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项目使用自定义输入类型(即)&lt;inputtype=\'dob\'&gt;创建自定义验证。我在堆栈溢出中看到了... 查看详情

Angular 2中元素的自定义验证

】Angular2中元素的自定义验证【英文标题】:CustomValidatononanElementinAngular2【发布时间】:2017-12-3018:19:23【问题描述】:我有一个输入元素&lt;inputtype="text"name="password"&gt;,它不在任何表单内。如何实现任何自定... 查看详情

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文... 查看详情