角度2の非同期フォームバリデータ

Question

実際にこの問題が発生しました。

カスタム非同期バリデータを作成して、ユーザー名が取得されていないかどうかを確認しました。

'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$; 
}; 

ので、このバリデータは動作します。ユーザー名を取得した場合、「Username taken」、「Username available」というログが記録されます。

問題： return文が機能しません。フォームの状態を購読すると、まだ「保留中」であり、「有効」または「無効」ではありません。 Angular2は、検証がまだ実行中であると考えています。

Observableに基づいて有効な返品または解決文を作成する方法を知っている人はいますか？

自分自身で購読し、resolve（）関数で何かをすることがあります。しかし、私の試みはすべてうまくいかなかった。

事前に感謝します！

Answer 1

あなたが最初のイベントの後に観察閉じを確実にするために.first()を試すことができます。

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

これは実際の問題であるかどうかわかりません。

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

：これは私のバリデータです。