Question

如何使用自定义验证程序检查数据库中是否存在电子邮件？我试图找到内置验证器，但没有为此目的。我不能把代码问题，因为我是angular 2的新手，我不知道如何使用自定义验证器。

在组件中我从数据库中获取所有用户，我需要检查输入表单中输入的电子邮件是否已存在。

ngOnInit() {
this.registrationService.getUsers().subscribe(data => this.allUsers = data, error => this.errorMsg = error);

}

在服务中：

AddUser(regValues: any, allUsers: any) {
    if (regValues.email !== "" || regValues.password !== "" || regValues.nickname !== "" || regValues.confirmpassword !== "") {

        if (regValues.password != regValues.confirmpassword) {
            window.alert("Password and confirm password don't match. Please input same password in these two fields.");
        }
        else if (regValues.password.length < 7) {
            window.alert("Password must have minimum 7 characters. Please input password that has apropriate length.");
        }
        else if (regValues.username.length < 3) {
            window.alert("Nickname must have minimum 3 characters. Please input nickname that has apropriate length.");
        }
        else {

            if (allUsers.indexOf(regValues.email) !== -1) {
                window.alert("This email is already taken. Please choose another one.");
            }

            var regUser = {
                Email: regValues.email,
                PasswordHash: undefined,
                UserName: regValues.username
            }

            regUser.PasswordHash = Md5.hashStr(regValues.password);

            let headers = new Headers({ 'Content-Type': 'application/json' });
            let options = new RequestOptions({ headers: headers });
            return this.http.post('/footballapi/user/add', regUser, options)
                .map((response: Response) => response.json())
                .catch(this.registrationService.errorHandler);
        }
    }
}

在组件中：

Register(regValues: any) { let allUsers = this.registrationService.getUsers(); this.registrationService.AddUser(regValues, allUsers).subscribe(data => this.allUsers = data, error => this.errorMsg = error); }

HTML表单：

<h4>Create a new account.</h4>
<p>{{errorMsg}}</p>
<hr />
<form #registrationForm="ngForm" (ngSubmit)="Register(registrationForm.value)">
    <div class="form-group">
        <label for="email">Email:</label>
        <div class="col-md-10">
            <input type="text" name="email" ngModel required placeholder="Write your email address here..." />
        </div>
    </div>
    <div class="form-group">
        <label for="email">Nickname:</label>
        <div class="col-md-10">
            <input type="text" name="nickname" ngModel required placeholder="Write your nickname here..." />
        </div>
    </div>
    <div class="form-group">
        <label for="password">Password:</label>
        <div class="col-md-10">
            <input type="password" name="password" ngModel required placeholder="Write your password here..." />
        </div>
    </div>
    <div class="form-group">
        <label for="confirmpassword">Confirm password:</label>
        <div class="col-md-10">
            <input type="password" name="confirmpassword" ngModel required placeholder="Write your password again..." />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" [disabled]="!registrationForm.form.valid">Confirm registration</button>
        </div>
    </div>
</form>

Answer 1

您可以使用Async Validator

来实现此目的

你必须编写一个Validator函数，调用数据库并返回一个变量来说明电子邮件是否存在天气。

import {Control} from "@angular/common"
export class EmailValidators{
static checkEmail(control: Control){
  // make a db call{
// if exists
return {checkEmail : true}

}else return null;

}
}

然后，此返回的布尔标志将作为aync验证器参数传递如果您使用模型驱动表单并使用formbuilder，请将其包含在您的组件中

export calss AppComponent{
constructor(fb : FormBuilder){
this.form = fb.group({
 email:['',Validators.EmailValidators.checkEmail]
})
}
}

这里是EmailValidators是你导入的类，checkEmail是用于定义自定义验证的静态方法，它返回布尔值。

Angular 2 - 电子邮件验证

1 个答案: