使用 Firestore 的 Angular 异步验证器答案

【问题标题】：Angular async validator using firestore使用 Firestore 的 Angular 异步验证器
【发布时间】：2018-01-24 05:29:47
【问题描述】：

我想在我的 Angular 项目中创建一个自定义异步验证器。

我正在为我的数据库使用 firestore，它的结构是

collection (profiles) - doc (email, username)

这是我的表单代码，

   this.registerForm = this.formBuilder.group({
      email : ['', Validators.compose([Validators.required, Validators.email]), this.emailCheck.bind(this) ],
      password : ['', Validators.required],
      confirmPassword : ['', Validators.compose([Validators.required, this.isEqualPassword.bind(this)])]
  })

但我不知道如何使this.emailCheck.bind(this) 起作用。

我做的是

emailCheck(control: FormControl)  {
  control.valueChanges
      .debounceTime(1500)
      .switchMap(val => this.emailValid(val))
      .subscribe((res) => {
        return res ? null : {emailAvailable : true}
      })



 emailValid(val) : Observable<any> {
  let ref = this.afs.collection(`profiles`, ref => ref.where('email', '==', val))
  return ref.valueChanges()

然后我得到错误

请告诉我如何解决这个问题。

【问题讨论】：

stackoverflow.com/questions/35521583/…

标签： javascript angular forms validation google-cloud-firestore

【解决方案1】：

查看official documenation 了解如何在 Angular 上创建自定义验证

基本上，您要做的就是创建一个函数，该函数返回带有错误或 null 的 Promise 或 Observable。

emailCheck(control: FormControl): Observable<{[key: string]: any}>  {
  return control.valueChanges
      .debounceTime(1500)
      .switchMap(val => this.emailValid(val))
      .map(res => res ? null : {emailAvailable : true})

【讨论】：