使用 Firebase 进行角度异步表单验证答案

【问题标题】：Angular async form validation using Firebase使用 Firebase 进行角度异步表单验证
【发布时间】：2018-06-17 03:25:12
【问题描述】：

我正在尝试实施表单验证，以检查 Firebase 是否存在用户名。如果没有，则表单无效。

当我使用 Observable 模拟数据时，表单验证工作正常。但是，当我从 Firebase 获取数据时它不起作用。

这行得通：

fromMockData(username: string): Observable<Usernames> {
  return username === 'demo' ? Observable.of({ uid: 'test' }) : Observable.of(null);
}

这个没有：

fromFirebase(username: string): Observable<Usernames> {
  return this.afs.doc(`usernames/${username}`).valueChanges();
}

我正在从验证服务访问这两个服务：

fromFirebase(input: FormControl): Observable<{[key: string]: any}> {
    return this.service.fromFirebase(input.value).pipe(
      map(user => user ? { invalidUsername: `@${input.value} already exists` } : null),
    );
  }

任何想法为什么从 Firebase 获取数据时它不起作用？

PS。将user 登录到控制台时，我可以看到正确的值——即使在使用 Firebase 时也是如此。但是，它不会向表单的错误属性返回正确的值（它仅适用于第一种情况：使用模拟数据创建 Observable）。

这是我的表格，顺便说一句：

this.form = this.fb.group({
  username: ['', [], [this.validator.fromFirebase.bind(this.validator)]],
});

Demo

【问题讨论】：

标签： javascript angular firebase angularfire2 google-cloud-firestore

【解决方案1】：

因为 Firebase 返回数据流，我需要使用 first operator 以便只发出第一项：

fromFirebase(input: FormControl): Observable<{[key: string]: any}> {
  return this.service.fromFirebase(input.value).pipe(
    first(),
    map(user => user ? { invalidUsername: `@${input.value} already exists` } : null),
  );
}

【讨论】：