角2 - 電子メールの認証

Question

カスタムバリデータを使用して電子メールがデータベースに存在するかどうかを確認するにはどうすればよいですか？私はバリデーターに組み込まれていることを見つけようとしましたが、その目的のためのものはありません。 私は角度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

あなたは、バリデータ関数を記述し、データベースへの呼び出しを行うと、天気が電子メールが存在するかどうかと言って、変数を返す必要が非同期検証

を使用することによって、これを達成することができます。そして、これはブーリアンフラグは、モデル駆動型フォームを使用している場合aync validatorパラメータ として渡され、formbuilderを使用することになります返さ

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

}else return null; 

} 
} 

、あなたのコンポーネントでこれを含める

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

ここではEmailValidatorsであるクラスでありますu importとcheckEmailは、ブール値を返すカスタム検証を定義するために使用される静的メソッドです。