Angular 2 异步表单验证器答案

【问题标题】：Angular 2 async form validatorAngular 2 异步表单验证器
【发布时间】：2017-03-02 03:38:09
【问题描述】：

其实我是被这个问题困住了。

我创建了一个自定义异步验证器来检查用户名是否被占用。这是我绑定它的地方：

 'name': ['',[Validators.required, Validators.minLength(4), Validators.minLength(4)], this.asyncName.bind(this)],

这是我的验证器：

asyncName(control: FormControl) {
    this.names$ = this.af.database.list('/usernames')
     .map (name => {
            name.filter(name => {
                if (name.name.toLowerCase() === control.value.toLowerCase()) {
                     console.log("Username taken");  
                     return {
                        valid: false
                    }; 
                } else {
                    console.log("Username available");
                    return {
                        valid: true
                    };
                }
            })
        });             

    return this.names$;
};

所以这个验证器有效。如果用户名被占用，则记录“用户名被占用”否则“用户名可用”。

我的问题： return 语句不起作用。当我订阅表单的状态时，它仍然是“待处理”而不是“有效”或“无效”。 Angular2 认为 Validation 仍在运行。

有谁知道如何根据 observables 创建有效的 return 或 resolve 语句？

也许我自己订阅并使用 resolve() 函数做一些事情。但我所有的尝试都没有奏效。

提前致谢！！！

【问题讨论】：

标签： angular rxjs angular2-forms angularfire2

【解决方案1】：

您可以尝试.first() 以确保可观察对象在第一个事件后关闭：

asyncName(control: FormControl) {
    this.names$ = this.af.database.list('/usernames').first()
    .map(...

不确定这是否是实际问题。

【讨论】：

【解决方案2】：

我有类似的问题。就我而言，我有类别列表，我想检查类别名称是否唯一。这是我的验证器：

export class CategoryFormComponent {
  constructor(
    private firebase: AngularFireDatabase
  ) {}
  
   categoryExists(control: AbstractControl) {
    return  this.firebase.database
        .ref(`categories/${this.uid}`) // user's uid
        .orderByChild('name')
        .equalTo(control.value)
        .once('value')
        .then((snapshot) => {
          return snapshot.val() ? { categoryExists: true } : null;
      });
  }
}

如您所见，您可以在数据库上进行搜索（性能更高），然后使用返回 Promise 的 once。

【讨论】：