首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用观察值时,在angular 2异步验证器中返回什么

在Angular 2的异步验证器中,当使用观察值时,应该返回一个Observable对象。这个Observable对象可以发出两种可能的值:null或一个对象,其中包含验证错误的信息。

异步验证器是用于在表单中进行异步验证的一种机制。它可以用于检查用户输入是否符合特定的条件,例如检查用户名是否已经存在于数据库中。在Angular中,异步验证器是通过在FormControl对象上使用AsyncValidatorFn函数来实现的。

下面是一个示例代码,展示了如何在Angular 2中使用观察值并返回Observable对象的异步验证器:

代码语言:txt
复制
import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 异步验证器函数
export function uniqueUsernameValidator(): AsyncValidatorFn {
  return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
    // 模拟异步验证过程,这里使用setTimeout函数来模拟延迟
    return new Observable((observer) => {
      setTimeout(() => {
        // 假设这里是一个检查用户名是否唯一的异步操作
        const isUsernameUnique = checkUsernameUniqueness(control.value);

        if (isUsernameUnique) {
          // 如果用户名已存在,返回一个包含错误信息的对象
          observer.next({ uniqueUsername: true });
        } else {
          // 如果用户名唯一,返回null
          observer.next(null);
        }
        observer.complete();
      }, 2000); // 模拟2秒延迟
    });
  };
}

// 检查用户名是否唯一的函数
function checkUsernameUniqueness(username: string): boolean {
  // 这里可以是实际的异步操作,例如向服务器发送请求检查用户名是否已存在
  // 返回true表示用户名已存在,返回false表示用户名唯一
  return username === 'existingUsername';
}

在上面的示例中,uniqueUsernameValidator函数返回一个AsyncValidatorFn函数,它接受一个FormControl对象作为参数,并返回一个Observable对象。在Observable对象的构造函数中,我们使用setTimeout函数模拟了一个异步操作,检查用户名是否唯一。根据检查结果,我们通过observer对象的next方法发出相应的值。

在使用这个异步验证器时,可以将它添加到FormControl对象的validators数组中,例如:

代码语言:txt
复制
import { FormControl, FormGroup, Validators } from '@angular/forms';

// 创建一个表单控件
const usernameControl = new FormControl('', null, uniqueUsernameValidator());

// 创建一个表单组
const form = new FormGroup({
  username: usernameControl
});

在上面的示例中,我们将uniqueUsernameValidator函数作为第三个参数传递给FormControl对象的构造函数,这样就将异步验证器应用到了该表单控件上。

这是一个使用观察值并返回Observable对象的Angular 2异步验证器的完整示例。请注意,这只是一个简单的示例,实际的异步验证器可能会涉及更复杂的逻辑和异步操作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用angular2使用nodejs创建服务,并成功获取参数

首先创建服务: 1.最好使用express,这个库有更多的api,方法:npm install express --save; 2. npm install @types/express --save...; 安装nodemon 可以让服务自动重启, 方法:npm install nodemon; 启动服务的时候用:nodemon build/...js; 这样服务就算启动完成了. /** *...,地址是http://localhost:8000") }); 接着本地从创建好的服务上获取数据: import { Component, OnInit } from '@angular/core'...引入过了,这里需要声明构造函数里头,并引入Http from "@angular/Http"; 接着就是坑了,写完后,发现还是获取不到服务上的数据: 接下来还有配置: 根目录新建一个文件:proxy.conf.json... 内容为: { "/api":{ "target":"http://localhost:8000" } } 然后package.json文件,修改一行 "start": "ng serve

4.3K70

yii2 控制验证请求参数的使用方法

写api接口一般会在控制简单验证参数的正确性。 使用yii只带验证(因为比较熟悉)实现有两种方式(效果都不佳)。 针对每个请求单独写个Model , 定义验证规则并进行验证。...缺点:写好多参数验证的Model 类。 使用独立验证 中提到的$validator- validateValue() 方法直接验证变量值。缺点:写实例化很多验证对象。...从验证规则获取可赋值的属性。 <?...使用参数验证模型 进行验证和存储验证错误消息。 使用魔术方法获取参数验证模型 验证错误消息。 <?...控制验证请求参数的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

4.4K10

yii2 控制验证请求参数的使用方法

写api接口一般会在控制简单验证参数的正确性。 使用yii只带验证(因为比较熟悉)实现有两种方式(效果都不佳)。 针对每个请求单独写个Model , 定义验证规则并进行验证。...缺点:写好多参数验证的Model 类。 使用独立验证 中提到的$validator- validateValue() 方法直接验证变量值。缺点:写实例化很多验证对象。...有么有“一劳永逸”的做法,像在Model 通过rules 方法定义验证规则并实现快速验证的呢?有!...从验证规则获取可赋值的属性。 <?...使用参数验证模型 进行验证和存储验证错误消息。 使用魔术方法获取参数验证模型 验证错误消息。 <?

3.7K00

angular面试题及答案_angular面试

传统的web技术,客户端请求一个web页面(HTML/JSP/asp),服务返回资源(或HTML页面),客户端再次请求另一个页面,服务器用另一个资源响应。...当observable或promise返回data,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。...Authentication (认证) : 用户登录凭据传递给(服务上的)认证API。服务验证凭据并返回JSON Web Token(JWT)。...– 下载代码 – 启动angular – 页面渲染 AOT优势   1、渲染得更快   2、需要的异步请求更少   3、需要下载的Angular框架体积更小...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑的应用程序。 27. 使用Angular的好处 可以添加自定义的directive. 优秀的社区支持。 客户端和服务的通讯非常便利。

10.9K120

实战 | Change Detection And Batch Update

WEB开发,当与用户或服务发生交互,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用的方法连续setState走的是批量更新,此外走的是连续更新。...为了验证这个的猜想,我们试着React的生命周期方法连续调用setState 打开控制台你会发现打印了0 0,更加验证了我们的猜想,因为生命周期方法也是React调用的。...小结 Angular1我们是直接操作数据的,这个过程Angular1是感知不到的,只能在某个点调用$apply进行脏检测,所以默认就是批量更新。...如果我们不使用Angular1提供的事件系统、定时和$http,如在jQuery事件中进行数据更新,我们需要手动调用$apply。

3.2K20

Angular进阶教程2-

依赖注入与HTTP的介绍 为什么使用服务?...服务类中注入服务 // 这种注入方式,会告诉Angular根注入中注册这个服务,这也是使用CLI生成服务默认的方式. // 这种方式注册,不需要再@NgModule装饰写providers,...而且代码编译打包,可以执行tree shaking优化,会移除所有没在应用中使用过的服务。...RxJS 首先RxJS是一个库,是针对异步数据流\color{#0abb3c}{异步数据流}异步数据流编程工具,当然Angular引入RxJS就是让异步更加简单,更加可控,开始RxJS之前,我们先来了解一下...Subject的Angular的常见的作用: 可以Angular通过service来实现不同组件,或者不同模块之间的传 // 定义公共的用于数据存储的service,文件名是(eg:xampleStore.service.ts

4.1K30

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 传统的WEB开发,当与用户或服务发生交互,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用的方法连续setState走的是批量更新,此外走的是连续更新。...$apply(); }); 小结 Angular1我们是直接操作数据的,这个过程Angular1是感知不到的,只能在某个点调用$apply进行脏检测,所以默认就是批量更新。...如果我们不使用Angular1提供的事件系统、定时和$http,如在jQuery事件中进行数据更新,我们需要手动调用$apply。 Angular2 ?...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

3.3K40

Change Detection And Batch Update

本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 传统的WEB开发,当与用户或服务发生交互,需要我们手动获取数据并更新DOM,这个过程是繁琐的、易错的。...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用的方法连续setState走的是批量更新,此外走的是连续更新。...$apply(); }); 小结 Angular1我们是直接操作数据的,这个过程Angular1是感知不到的,只能在某个点调用$apply进行脏检测,所以默认就是批量更新。...如果我们不使用Angular1提供的事件系统、定时和$http,如在jQuery事件中进行数据更新,我们需要手动调用$apply。 Angular2 ?...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

3.7K70

Angular 服务

HeroService.getHeroes() 必须具有某种形式的异步函数签名。 它可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象)。... HTTP 教程,你将会调用 HttpClient.get() 它也同样返回一个 Observable,它也会发出单个,这个就是来自 HTTP 响应体的英雄数组...使用这种异步方式,当 HeroService 从远端服务获取英雄数据,就可以工作了。 显示消息 在这一节,你将 添加一个 MessagesComponent,它在屏幕的底部显示应用的消息。...你根注入把 HeroService 注册为该服务的提供商,以便在别处可以注入它。 你使用 Angular 依赖注入机制把它注入到了组件。...你使用 RxJS 的 of() 方法返回了一个模拟英雄数据的可观察对象 (Observable)。

3.3K70

Angular快速学习笔记(4) -- Observable与RxJS

介绍RxJS前,先介绍Observable 可观察对象(Observable) 可观察对象支持应用的发布者和订阅者之间传递消息。 可观察对象可以发送多个任意类型的 —— 字面量、消息、事件。...这些工具函数可用于: 把现有的异步代码转换成可观察对象 迭代流的各个 把这些映射成其它类型 对流进行过滤 组合多个流 创建可观察对象的函数 RxJS 提供了一些用来创建可观察对象的函数。...num => this.stopwatchValue = num ); } } Angular的observables Angular 中大量使用了可观察对象,作为处理各种常用异步操作的接口...HTTP 模块使用观察对象来处理 AJAX 请求和响应 路由和表单模块使用观察对象来监听对用户输入事件的响应 事件发送 EventEmitter Angular 提供了一个 EventEmitter...例如,http.get(‘/api’) 就会返回观察对象。 为什么NG使用observable而不是Promise?

5K20

AngularDart4.0 英雄之旅-教程-06服务 顶

当组件实现该方法Angular会在适当的时候调用它。 “Lifecycle Hooks”页面详细了解生命周期挂钩。...当你点击一个英雄名字,应用程序应该显示英雄名单和英雄详情视图。 异步英雄服务 HeroService立即返回模拟英雄列表; 它的getHeroes()签名是同步的。...当使用远程服务,用户不必等待服务响应; 此外,您在等待期间无法阻塞用户界面。 为了协调视图和响应,你可以使用Futures,这是一个改变getHeroes()方法签名的异步技术。...英雄服务返回一个Future Future代表未来的计算或使用Future,您可以注册回调函数,计算完成(结果准备就绪),或需要报告计算错误时调用。 这是一个简单的解释。...有关异步函数的更多信息,请参阅Dart语言浏览声明异步函数。 处理Future 由于对HeroService的更改,应用程序组件的英雄属性现在是Future,而不是英雄列表。

2.9K10

从单向到双向数据绑定0.前言1.单向数据(代表:react)2.观察者模式3.双绑的中间枢纽——Object.defineproperty(代表:vue)4. 脏检测(代表:angular1)前面说

因为用了定时,他会异步地将数据反映上去。...脏检测(代表:angular1) 前面说的定时双绑是扯淡 前面特地埋了个坑,关于Angular脏检查,并不是一些人想象的那样子用定时周期性进行脏检测(我前面写的那个超级简单的双绑就是人们传闻的angular...因为双绑的M->V一般就是基于ui行为、定时、ajax这些异步动作,所以这就知道为什么ng-model只能对表单有效了。...angular1,私有变量以$$开头,$$watch是一个存放很多个绑定的对象的数组,用$watch方法来添加的,每一个被绑定的对象属性是:变量名、变量旧、一个函数(用来返回变量新)、检测变化的回调函数...对于为什么使用一个函数来记录新(类似vue的computed)?这样子可以每次调用都得到数据上最新的,如果把这个写死,不就是不会变化了吗?这是监控函数的一般形式:从作用域获取值再返回

1.6K40

新手们容易Promise上挖的坑~

这里的问题在于第一个then之中的并没有返回,导致这个then会立即决议为undefined并执行第二个then的操作。...这个新的 promise 会在数组中所有的 promises 都成功返回后才返回。他是异步版的 for 循环。...并且 Promise.all() 会将执行结果组成的数组返回到下一个函数,比如当你希望从 PouchDB 获取多个对象,会非常有用。...早期,deferred Q,When,RSVP,Bluebird,Lie等等的 “优秀” 类库中被引入, jQuery 与 Angular 使用 ES6 Promise 规范之前,都是使用这种模式编写代码...当我们 then() 函数内部: ? 我们可以做什么呢?有三种事情: return 另一个 promise return一个同步的(或undefined) throw一个同步异常 就是这样。

1.5K50

从单向到双向数据绑定

因为用了定时,他会异步地将数据反映上去。...我们的例子其实不用观察者模式都可以实现双绑,但是实际应用中肯定也不可以不用观察者模式,为了代码可读性和可维护性以及拓展性。...脏检测(代表:angular1) 前面说的定时双绑是扯淡 前面特地埋了个坑,关于Angular脏检查,并不是一些人想象的那样子用定时周期性进行脏检测(我前面写的那个超级简单的双绑就是人们传闻的angular...因为双绑的M->V一般就是基于ui行为、定时、ajax这些异步动作,所以这就知道为什么ng-model只能对表单有效了。...watch方法来添加的,每一个被绑定的对象属性是:变量名、变量旧、一个函数(用来返回变量新)、检测变化的回调函数。 对于为什么使用一个函数来记录新(类似vue的computed)?

3.6K20

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰添加元数据的形式 providedIn: 'root', 当你顶层提供该服务Angular...使用ngOnInit 生命周期钩子调用服务 RXJS 处理异步操作 a....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...添加路由 ,路由定义 会告诉路由,当用户点击某个链接或者浏览地址栏输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览地址栏 URL 的字符串...要使用路由,必须首先初始化路由,并让它开始监听浏览的地址变化 b.

3.6K50

Angular 快速学习笔记(1) -- 官方示例要点

Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰添加元数据的形式 providedIn: 'root', 当你顶层提供该服务Angular...使用ngOnInit 生命周期钩子调用服务 RXJS 处理异步操作 a....异步处理可以使用回调函数,可以返回 Promise(承诺),也可以返回 Observable(可观察对象) b. angular使用了Rxjs,因此使用Observable,Observable 是...添加路由 ,路由定义 会告诉路由,当用户点击某个链接或者浏览地址栏输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览地址栏 URL 的字符串...要使用路由,必须首先初始化路由,并让它开始监听浏览的地址变化 b.

3.6K00

浅谈 Angular 项目实战

什么使用 Angular 我不是 Angular 的布道者,但如今自称 Angular 派,使用 Angular 做项目让我有一种兴奋感。...我们用一个最常见的数据映射例子说明,比如保存性别数据,1 表示男,2 表示女。...关于异步开发的历史面试中有遇到过,可以说的东西很多,比如回调函数、Promise、迭代和生成器、async 和 await,除此之外,RxJS 的可观察对象(Observable)应该是下一个更强大的异步编程方式...Angular 官网对可观察对象(Observable)和承诺(Promise)进行了对比。 需要特别注意的就是,只有当订阅 Observable 的实例,它才会开始发布。...订阅要先调用该实例的 subscribe() 方法,并把一个观察者对象传给它,用来接收通知。我刚开始使用时,也是因为这个原因被坑了一把。

4.5K00

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

ngOnChanges:当Angular设置其接收当前和上一个对象的数据绑定属性响应。 ngOnInit:第一个ngOnChange触发之后,初始化组件/指令。...使用Angular 2,和使用Angular 1相比,有什么优势?...Angular2,组件中发生的任何改变总是从当前组件传播到其所有子组件。如果一个子组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射api来发出事件。...这通常用在setter,当类被更改完成。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...Promises vs Observables Promises: 返回单个 不可取消 Observables: 可以使用多个 可取消 支持map,filter,reduce和类似的操作符 ES 2016

17.3K80

AngularJS的digest循环和$apply

最近在写AngularJS,遇到一个问题,Ajax异步请求后台数据,然后将结果赋值给当前scope某对象的属性,页面怎么都取不到,然而在js端却可以正常打印出来。...一、传统事件触发 标准的浏览流程,页面加载、$http请求返回响应、鼠标移动以及按钮被点击等情况都会触发事件。...当使用angular,其会扩展这个标准的浏览流程,创建一个angular上下文(angular事件循环内的特定代码,该angular事件循环通常被称为$digest循环)。...循环之前,会触发该(ng-model)上运行的验证和格式化操作; (5)由于digest循环中值发生了变化,angular需要再次运行这一循环以确定它没有改变作用域对象上的其他。...(1)不建议控制使用$apply(),因为这样会导致难以测试。 (2)jquery和angular同时使用被视为一个肮脏的行为。

3.1K41

前端三大框架vue,angular,react大杂烩

函数有三参数,”要观察什么”,”变化时要发生什么”,以及你要监视的是一个变量还是一个对象。    使用ng-model,你可以使用双向数据绑定。    使用$scope....$watch只为它传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。ng-model,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用来更新模型数据。...Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。...2、视图渲染 Angular1    AngularJS的工作原理是:HTML模板将会被浏览解析到DOM, DOM结构成为AngularJS编译的输入。...从整体趋势上来说,浏览和手机还会越变越快,框架本身的渲染性能在整个前端性能优化体系,会渐渐淡化,更多的优化点还是构建方式、缓存、图片加载、网络链路、HTTP/2 等方面 4、模块化与组件 Angular1

2.9K90
领券