Angular4でカスタム非同期検証ツールを実装する方法

Question

プロジェクトでAngular 4を適用していますが、HTTPリクエストを使用してカスタム検証に問題があります。

また、私はこのHow to implement Custom Async Validator in Angular2

を試してみてくださいしかし、それは私のプロジェクトでは動作しません。

検証結着：

userName: ['', [Validators.required, Validators.minLength(3), this.validateUserName.bind(this)]] 

値の変化イベント：

let userNameControl = this.individualForm.get('userName'); 
userNameControl.valueChanges.subscribe(value => { 
    this.setErrorMessagesForUserNameControl(userNameControl) 
    } 
); 

検証機能：

validateUserName(control: FormControl): Promise<any> { 
let promise = new Promise<any>(
    (resolve, reject) => { 
    if (this.oldUserNameForCheck != undefined) { 
     this._individualUpdateService.isUserNameExisting(this.oldUserNameForCheck, control.value).subscribe(
     (res) => { 
      if (res.isUserNameExisting) { 
      console.log("existing"); 
      resolve({'existing': true}); 
      } else { 
      console.log("NOT existing"); 
      resolve(null); 
      } 
     }, 
     (error) => { 
      console.log(error); 
     } 
    ); 
    } else { 
     resolve(null); 
    } 
    } 
); 
return promise; 
} 

をここで

は、私がこれまで行ってきたものです

私はちょうどバックエンドに送信することによってユーザー名の検証を試みます。

Here's the logs

あなたが見ることができるように、 "必須"、 "MINLENGTH" のメッセージ、それらの作業罰金があります。しかし、カスタム検証のメッセージはあまり明確ではありません。私は本当に高度で、おかげであなたの助けに感謝:)

Answer 1

非同期バリデータは次のパラメータである必要があり

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.validateUserName.bind(this) ] 
] 

また、その優れたバリデータを作成することになり必要な依存関係を持つファクトリメソッドを持って、代わりに使用して 'にバインド（this） '

userNameValidator(originalUsername, individualUpdateService) { 
    return (control: FormControl): Promise<any> => { 
     return new Promise<any>((resolve, reject) => { 
      if (originalUsername != undefined) { 
       individualUpdateService.isUserNameExisting(originalUsername, control.value).subscribe(
        (res) => { 
         if (res.isUserNameExisting) { 
          console.log("existing"); 
          resolve({ 'existing': true }); 
         } else { 
          console.log("NOT existing"); 
          resolve(null); 
         } 
        }, 
        (error) => { 
         console.log(error); 
        } 
       ); 
      } else { 
       resolve(null); 
      } 
     }) 
    } 
} 

userName: ['', 
    [ Validators.required, Validators.minLength(3) ], 
    [ this.userNameValidator(this.oldUserNameForCheck, this._individualUpdateService) ] 
]