Angular2でカスタムバリデーターに追加値を渡しますか？

Question

私はユーザーの電子メールアドレスが一意であるかどうかを確認するバリデーターを持っています。これを行うには、ユーザーIDも渡して、独自のチェックには含まれないようにする必要があります。これを達成する最良の方法は何ですか？

バリデーターには、コントロール値にしかアクセスできないことがわかります。

<input #emailAddress="ngForm" type="text" [(ngModel)]="user.emailAddress" ngControl="emailAddress" required userExists /> 

現在、私はそれを達成することができました唯一の方法は理想的ではないバリ、上の静的な値を設定することである：私はこのように私のバリデータをフックしています！ここでバリデータのための私の完全なコードは次のとおりです。

import { NG_ASYNC_VALIDATORS, Control } from '@angular/common'; 
import { Directive, provide, forwardRef, Attribute } from '@angular/core'; 
import { UserService } from './user.service'; 
import { User } from './user.model'; 

interface ValidationResult { 
    [key: string]: boolean; 
} 

@Directive({ 
    selector: '[userExists][ngModel]', 
    providers: [ 
     provide(NG_ASYNC_VALIDATORS, { 
      useExisting: forwardRef(() => UserExistsValidator), 
      multi: true 
     }) 
    ] 
}) 
export class UserExistsValidator { 
    public static user: User; 

    constructor(private _userService: UserService) { } 

    validate(control: Control): Promise<ValidationResult> { 
     return new Promise((resolve, reject) => { 
      this._userService.exists(control.value, UserExistsValidator.user.id).subscribe(
       (response: any) => { 
        if (response.exists) 
         return resolve({ userExists: { valid: false } }); 
        else 
         return resolve(null); 
       }, 
       (error: any) => { console.log(error); } 
      ) 
     }); 
    } 
} 

Answer 1

私はあなたが唯一のコンポーネントごとにサービスを持つことができます。この方法で共有サービス

@Injectable() 
class ValidatorParam { 
    value:string; // could also be an observable 
} 

@Directive({ 
    selector: '[userExists][ngModel]', 
    providers: [ 
     { provide: NG_ASYNC_VALIDATORS, 
      useExisting: forwardRef(() => UserExistsValidator), 
      multi: true 
     }) 
    ] 
}) 
export class UserExistsValidator { 
    public static user: User; 

    constructor(private _userService: UserService, private _param:ValidatorParam) { } 

    validate(control: Control): Promise<ValidationResult> { 
     return new Promise((resolve, reject) => { 
      this._param.... // don't know what you want to do with it 
      this._userService.exists(control.value, UserExistsValidator.user.id).subscribe(
       (response: any) => { 
        if (response.exists) 
         return resolve({ userExists: { valid: false } }); 
        else 
         return resolve(null); 
       }, 
       (error: any) => { console.log(error); } 
      ) 
     }); 
    } 
} 

@Component({ 
    selector: '...', 
    providers: [ValidatorParam], 
    template: ` 
<input #emailAddress="ngForm" type="text" [(ngModel)]="user.emailAddress" ngControl="emailAddress" required userExists /> 
`}) 
export class MyComponent { 
    constructor(private _validatorParam:ValidatorParam) { 
    this._validatorParam.value = xxx; 
    } 
} 

を使用します。このコンポーネントに複数の入力要素がある場合は、サービスを共有する必要があります。

注意：自分自身を試していません。