自定义 Angular 4 验证器取决于动态值

关键词：

【中文标题】自定义 Angular 4 验证器取决于动态值【英文标题】：Custom Angular 4 Validator depends on dynamic value 【发布时间】：2018-12-29 09:00:55 【问题描述】：

我必须创建一个自定义验证器validLocation

<input [(ngModel)] ="search" (change)="searchLocation" [validLocation] = "location" />

所以当用户输入一个值时searchLocation会得到搜索到的值并通过Ajax设置location。

问题是我如何在验证指令中跟踪 location 中设置的值

我尝试使用@Input validLocation 和ngOnChanges，但是如何在设置新数据后触发验证，该数据将在解决承诺后设置。

感谢任何帮助。

【问题讨论】：

您能否分享更多代码或将您的示例添加到stackblitz.com ？ 【参考方案1】：

如果我理解正确，您可以将您的 promise 或 observable 传递给您的指令，并在它解析时检查它的值，例如：

@Directive( selector: '[validLocation]' )
export class ValidLocation implements OnInit 

isPromiseDone: boolean;
promise: any;

@Input()
set validLocation(passedValue: any) 
    if (!passedValue) 
        return;
    

    const isObservable: boolean = passedValue instanceof Observable;
    const isSubscription: boolean = passedValue instanceof Subscription;
    const isPromise: boolean = passedValue instanceof Promise;

    if (isObservable) 
        this.promise = passedValue.toPromise();
     else if (isSubscription) 
        this.promise = new Promise((resolve) => 
            (passedValue as Subscription).add(resolve);
        );
     else if (isPromise) 
        this.promise = passedValue;
    
    this.checkAndInitPromiseHandler();


constructor() 

initPromiseHandler() 
    const promise = this.promise;
    this.isPromiseDone = false;
    const resolveLoadingState = () => 
        this.isPromiseDone = true;
        this.doSomething()
    ;
    if (promise.finally) 
        promise.finally(resolveLoadingState);
     else 
        promise
            .then(resolveLoadingState, resolveLoadingState);
    


checkAndInitPromiseHandler() 
    if (this.promise) 
        this.initPromiseHandler();
    


ngOnInit() 
    this.checkAndInitPromiseHandler();


doSomething()

【讨论】：

Angular 5 动态表单中的自定义验证器

】Angular5动态表单中的自定义验证器【英文标题】：CustomvalidatorinAngular5dynamicforms【发布时间】：2018-05-2810:54:18【问题描述】：我正在从Angular5中的可配置json创建一个动态表单。一切正常，但我无法为特定字段添加自定义验证器。... 查看详情

Angular 4：未调用自定义验证器

】Angular4：未调用自定义验证器【英文标题】：Angular4:Customvalidatornotbeingcalled【发布时间】：2018-01-1912:43:25【问题描述】：我已经为泛卡号验证定义了一个自定义验证器（https://en.wikipedia.org/wiki/Permanent_account_number）。functionvalidateP... 查看详情

Angular 4 - 验证器自定义函数这是未定义的

】Angular4-验证器自定义函数这是未定义的【英文标题】：Angular4-validatorcustomfunctionthisisundefined【发布时间】：2018-07-2422:02:34【问题描述】：我正在构建一个应用程序与组件FormComponent。在里面我正在使用来自角核心的反应形式模块... 查看详情

验证未与自定义输入组件一起传播 - Angular 4

...本区域组件，里面有文本区域输入。我创建了一个自定义验证器来检查文本的最大长度（不是html长度）。一切正常，问题是内部输入设置为无效（使用ng-invalid），而che组件本身没有， 查看详情

angular5+自定义表单验证器

Angular5+自定义表单验证器CustomValidators标签（空格分隔）：Angular首先阐述一下遇到的问题：怎样实现“再次输入密码”的验证（两个controller值相等）（equalTo）怎样反向监听（先输入“再次输入密码”，后输入设置密码）解决思... 查看详情

Angular 7 中的动态验证： enable() 和 setValidators 取决于更改触发的标志

】Angular7中的动态验证：enable()和setValidators取决于更改触发的标志【英文标题】：DynamicValidationsinAngular7:enable()&setValidatorsdependingonflagstriggeredbychanges【发布时间】：2019-06-2806:43:54【问题描述】：我的上一个Angular项目是很久以前... 查看详情

CORS Preflight 请求 - 标头中的自定义身份验证令牌 - Spring 和 Angular 4

】CORSPreflight请求-标头中的自定义身份验证令牌-Spring和Angular4【英文标题】：CORSPreflightrequest-Customauthtokeninheader-SpringandAngular4【发布时间】：2018-04-2323:07:42【问题描述】：我在本地服务器上使用令牌作为标头请求简单GET时遇到问... 查看详情

在表单字段验证中获取请求

...：2013-07-2317:16:45【问题描述】：我有一个表单，其中验证取决于登录的用户。对于某些用户，某些值是有效的，对于其他用户，它们是无效的。有效和无效是动态的-我无法为每个用户组创建新表单。更重要的是，我需要在更多... 查看详情

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

】如何使用Angular重置自定义表单控件【英文标题】：HowcanIresetacustomformcontrolwithAngular【发布时间】：2018-11-0921:54:04【问题描述】：我有一个带有验证的自定义表单控件。我在其中使用了一个独立的FormControl来处理值和一些验证。... 查看详情

angular自定义验证器添加入模板驱动表单

创建自定义验证器的命令nggeneratedirectiveforbidden-name(自定义床啊金验证器的名称)生成的文件内容import{Directive}from'@angular/core';@Directive({selector:'[appForbiddenName]'})exportclassForbiddenNameDirective{const 查看详情

在 Rails 4 中正确实现 Parsley.js 自定义远程验证器

】在Rails4中正确实现Parsley.js自定义远程验证器【英文标题】：ProperlyimplementingtheParsley.jsCustomRemoteValidatorinRails4【发布时间】：2016-01-3116:37:51【问题描述】：我正在尝试获取data-parsley以验证用户名是否已存在于数据库中。我遇到的... 查看详情

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

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

】Angular11自定义ISBN验证器响应式表单【英文标题】：Angular11CustomISBNValidatorReactiveForms【发布时间】：2022-01-2322:09:59【问题描述】：我正在对ISBN号码进行自定义验证，我已经拥有检查号码并完美运行的功能，可以通过控制台为我... 查看详情

Angular2如何对自定义验证器指令进行单元测试？

】Angular2如何对自定义验证器指令进行单元测试？【英文标题】：Angular2howtounittestacustomvalidatordirective?【发布时间】：2017-02-1820:19:43【问题描述】：我为输入字段编写了一个非常简单的自定义验证器：importDirectivefrom\'@angular/core\';i... 查看详情

如何在 Angular 2+ 中添加自定义验证

】如何在Angular2+中添加自定义验证【英文标题】：Howtoaddcustomvalidationsforhandsontableinangular2+【发布时间】：2019-07-1112:55:25【问题描述】：我在Angular6中使用handsontable。我尝试了添加自定义验证的代码，该验证显示在我的Angular6组件... 查看详情

数据注释/验证和动态值

...具有动态验证条件（即字符串长度可以最小为8或12，具体取决于数据库值或其他动态值）是否无法使用数据注释进行验证？据我了解，任何参数的值（例如StringLength最小/最大值）都必须是真正静态的。具有动态验证值的应用程... 查看详情