正文 

当前位置： 首页 > 问答 >

异步验证器不适用于 Angular 中的模板驱动表单

     2023-03-13     156

关键词：

【中文标题】异步验证器不适用于 Angular 中的模板驱动表单【英文标题】：Async Validator not working with Template driven Forms in Angular 【发布时间】：2017-10-18 01:31:52 【问题描述】：

我为我的模板驱动表单创建了一个异步验证器。

import Directive, forwardRef from "@angular/core";
import NG_ASYNC_VALIDATORS, Validator, AbstractControl, AsyncValidator from "@angular/forms";
import Observable from "rxjs";


@Directive(
  selector: '[asyncValidator][ngModel]',
  providers: [
    provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => AsyncAgeValidator), multi: true

  ]
)

export class AsyncAgeValidator implements Validator

  validate(c: AbstractControl): Observable<[key : number] : any>
      return this.validateAgeObservable(c.value);
  

  validateAgeObservable( age: number ) 
    return new Observable(observer => 

      if( age === 20 ) 
        observer.next(null);
       else 
        observer.next(asyncInvalid: true);
        console.log('validate');
      
    );

我在我的模板中使用它，如下所示，但我没有从模板中的验证器中得到我期望的错误消息。该调用将发送给验证器，但我猜它没有在组件中注册可观察对象。

<md-input-container>
  <input mdInput type="number" name="age" [(ngModel)]="user.age" placeholder="Age" required asyncValidator>
</md-input-container>

【问题讨论】：

【参考方案1】：

添加到 yurzui 的第二个答案：

这行得通：

validate(c: AbstractControl): Observable<[key : number] : any>
    return this.validateAgeObservable(c.value).first();

这样做：

validate(c: AbstractControl): Observable<[key : number] : any>
    return this.validateAgeObservable(c.value).take(1);

【讨论】：

【参考方案2】：

您的 observable 永远不会完成，因此 Angular 不知道何时更改表单状态。所以记住你的 observable 必须完成。

您可以通过多种方式实现此目的：

1) 在观察者上手动调用complete() 方法：

validateAgeObservable( age: number ) 
  return new Observable(observer => 
    observer.next(age === 20 ? null : asyncInvalid: true);
    observer.complete();
  );

Plunker Example

2) 调用first()方法：

validate(c: AbstractControl): Observable<[key : number] : any>
    return this.validateAgeObservable(c.value).first();


validateAgeObservable( age: number ) 
  return new Observable(observer => 
    observer.next(age === 20 ? null : asyncInvalid: true);
  );

Plunker Example

【讨论】：

您好！你知道这个问题的答案吗？ ***.com/questions/44044163/…

表单验证不适用于 Ionic 2 中的 Angular 2 FormBuilder

】表单验证不适用于Ionic2中的Angular2FormBuilder【英文标题】：FormvalidationisnotworkingwithAngular2FormBuilderinIonic2【发布时间】：2017-02-0523:45:01【问题描述】：我正在构建一个Ionic2（打字稿）应用程序。在复选框（ion-checkbox标记）中的简... 查看详情

Angular - 模板驱动的表单 - 控制器中的自定义验证器功能

】Angular-模板驱动的表单-控制器中的自定义验证器功能【英文标题】：Angular-Templatedrivenforms-customvalidatorfunctioninthecontroller【发布时间】：2019-03-2306:30:29【问题描述】：由于在ngModel中使用响应式表单是deprecatedinAngular6，并且我的项... 查看详情

如何通过模板驱动形式验证 Angular 7 中的下拉列表

】如何通过模板驱动形式验证Angular7中的下拉列表【英文标题】：Howtovalidatedropdowninangular7bytemplatedrivenform【发布时间】：2020-11-1122:14:11【问题描述】：尝试验证下拉选择框但不工作。可能是css问题？那么如何验证它。如果有人知... 查看详情

Angular/Rxjs 管道异步不适用于 s-s-r？

】Angular/Rxjs管道异步不适用于s-s-r？【英文标题】：Angular/Rxjspipeasyncdoesnotworkwiths-s-r?【发布时间】：2020-09-2611:17:39【问题描述】：我在s-s-r上运行的异步管道存在问题。没有错误，只有一个无限循环（似乎服务器正在等待解析obser... 查看详情

必需属性不适用于Angular Js中的文件输入

】必需属性不适用于AngularJs中的文件输入【英文标题】：RequiredattributeNotworkingwithFileinputinAngularJs【发布时间】：2013-04-1821:38:58【问题描述】：我的表单中有一个文件上传控件。我正在使用AngularJS。当我输入所需的属性来验证文件... 查看详情

Angular 2 模板驱动的表单组验证

】Angular2模板驱动的表单组验证【英文标题】：Angular2templatedrivenformgroupvalidation【发布时间】：2017-06-2707:57:15【问题描述】：我有一个关于angular2模板驱动表单的问题。我已经设置了其中一个表单，如果表单组中的一个输入无效，... 查看详情

通过 Angular 调用时，Windows 身份验证不适用于 WebAPI

】通过Angular调用时，Windows身份验证不适用于WebAPI【英文标题】：WindowsAuthenticationisnotworkingwithWebAPIwhencalledthroughAngular【发布时间】：2017-03-1321:49:54【问题描述】：我有两个项目，一个是MVC（使用Angular），另一个是WebAPI。Windows身... 查看详情

Angular 4 表单验证器 - minLength 和 maxLength 不适用于字段类型号

】Angular4表单验证器-minLength和maxLength不适用于字段类型号【英文标题】：Angular4FormValidators-minLength&maxLengthdoesnotworkonfieldtypenumber【发布时间】：2018-02-1803:52:55【问题描述】：我正在尝试开发一个联系表单，我希望用户输入长度... 查看详情

在模板中使用异步管道可观察到的不适用于单个值

】在模板中使用异步管道可观察到的不适用于单个值【英文标题】：ObservablewithAsyncPipeintemplateisnotworkingforsinglevalue【发布时间】：2017-01-1020:07:23【问题描述】：我有一个组件向我的服务请求Observable对象（即底层的http.get返回一个... 查看详情

嵌套组件不适用于 Angular 中的路由

】嵌套组件不适用于Angular中的路由【英文标题】：Nested-ComponentsnotworkingwithRoutinginAngular【发布时间】：2020-12-2318:20:44【问题描述】：我正在尝试在自己的项目中学习角度，我从处理路由路径：/开始，即在(app.routing.module.ts)中渲染... 查看详情

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

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

模板驱动表单中的表单验证问题

...【发布时间】：2019-04-1612:03:09【问题描述】：我正在使用Angular6开发一个Web应用程序。我想创建一些受HTML输入组件启发的自定义组件。例如：CustomComponent.ts（打字稿）@Component(selector:\'custom-component\',templ 查看详情

angular2模板驱动的表单验证问题

】angular2模板驱动的表单验证问题【英文标题】：angular2templatedrivenformvalidationissue【发布时间】：2018-03-0103:32:05【问题描述】：我对angular2模板驱动的表单验证有问题，以下是我的表单的代码。<h1>page_title</h1><div*ngIf="suc... 查看详情

模型绑定不适用于angular2中的选择[重复]

】模型绑定不适用于angular2中的选择[重复]【英文标题】：modelbindisnotworkingwithselectinangular2[duplicate]【发布时间】：2016-08-1410:18:06【问题描述】：我正在尝试设置下拉菜单的默认值，我为模型设置了默认值但它没有更新选择请看http... 查看详情

PhantomJS 不适用于 Angular2 项目中的 Karma

】PhantomJS不适用于Angular2项目中的Karma【英文标题】：PhantomJSdoesnotworkwithKarmainAngular2project【发布时间】：2017-03-0800:33:30【问题描述】：我使用angularcli(1.0.0-rc1.0.0)创建了一个开箱即用的项目。然后我安装了PhantomJS插件（npminstallkarma... 查看详情

ngrok 不适用于浏览器中的路径（Angular Webserver）

】ngrok不适用于浏览器中的路径（AngularWebserver）【英文标题】：ngrokdoesn\'tworkwithpathinbrowser(AngularWebserver)【发布时间】：2021-03-2205:37:22【问题描述】：我目前正在使用Angular开发一个网站，并且我正在使用Apache2将它托管在我的Raspbe... 查看详情

Angular WithCredentials 不适用于 POST、PUT

】AngularWithCredentials不适用于POST、PUT【英文标题】：AngularWithCredentialsnotworkingforPOST,PUT【发布时间】：2018-05-0209:02:19【问题描述】：我正在开发一个Angular网站：•localhost/test上的.NetFramework服务器•本地主机上的客户端：4200我的cook... 查看详情

mirage.js 不适用于 Angular 中的子 url 路径（仅适用于根路径）

】mirage.js不适用于Angular中的子url路径（仅适用于根路径）【英文标题】：mirage.jswillnotworkwithsuburlpaths(onlywithrootpath)inangular【发布时间】：2020-06-0913:36:41【问题描述】：当通过根url(localhost:4200/)执行后端调用时，Mirage确实匹配定义... 查看详情