要使用AngularFireDatabase调用验证器,您需要遵循以下步骤:
npm install firebase @angular/fire
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
// 设置Firebase配置
const firebaseConfig = {
apiKey: 'YOUR_API_KEY',
authDomain: 'YOUR_AUTH_DOMAIN',
databaseURL: 'YOUR_DATABASE_URL',
projectId: 'YOUR_PROJECT_ID',
storageBucket: 'YOUR_STORAGE_BUCKET',
messagingSenderId: 'YOUR_MESSAGING_SENDER_ID'
};
@NgModule({
imports: [
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule
],
// ...
})
export class AppModule { }
import { AbstractControl } from '@angular/forms';
import { AngularFireDatabase } from '@angular/fire/database';
export class CustomValidator {
constructor(private db: AngularFireDatabase) { }
static async uniqueUsername(control: AbstractControl) {
const username = control.value;
const usernameRef = this.db.object(`users/${username}`).valueChanges();
return usernameRef.toPromise().then(snapshot => {
return snapshot ? { uniqueUsername: true } : null;
});
}
}
import { Component } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { CustomValidator } from './validator';
@Component({
// ...
})
export class MyComponent {
constructor(private fb: FormBuilder) { }
form = this.fb.group({
username: ['', [Validators.required, CustomValidator.uniqueUsername.bind(this)]]
});
onSubmit() {
// 处理表单提交逻辑
}
}
这样,您就可以使用AngularFireDatabase调用验证器来验证表单输入。当用户尝试使用已经存在的用户名时,将显示错误消息。