Question

我尝试实施表单验证，如果存在用户名，则会检查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

Answer 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),
  );
}

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

1 个答案: