1
私はAngular2フォーム用のカスタムバリデーターを作成しました。 これは単純に入力をブラックリストと比較していますが、これまでのところうまく動作します。 例外:フォームの検証が完了した後でブラックリストが更新された場合、フォームは入力フィールドが変更されるまで再度検証されません。 これを修正するには、コンポーネントにテンプレート変数があり、手動で更新をトリガーします。属性ディレクティブから他の属性ディレクティブにアクセスする
@ViewChild('email') emailNgModel: NgModel;
...
this.emailBlacklist = this.emailBlacklist.concat(email);
let sub = this.zone.onStable.asObservable().subscribe(() => {
if (sub) sub.unsubscribe();
this.zone.run(() => {
this.emailNgModel.control.updateValueAndValidity();
});
});
は、私は多くの
export const BLACKLIST_VALIDATOR: any = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => BlacklistValidatorDirective),
multi: true
};
@Directive({
selector: '[validateBlacklist][formControlName],[validateBlacklist][formControl],[validateBlacklist][ngModel]',
providers: [BLACKLIST_VALIDATOR]
})
export class BlacklistValidatorDirective implements Validator, OnChanges {
@Input('validateBlacklist') blacklist;
constructor() {
}
ngOnChanges(changes: SimpleChanges): void {
if ('blacklist' in changes) {
// TODO trigger ngModel.control.updateValueAndValidity()
}
}
validate(c: AbstractControl): {[p: string]: any} {
return validateBlacklist(this.blacklist, c.value);
}
}
export function validateBlacklist(blacklist: string[], value) {
if (blacklist && blacklist.indexOf(value) >= 0) {
return {
blacklist: true
};
}
return null;
}
今の質問は、どのように私はホストからngModelを得ることができている(下記のTODOを参照してください)私の指示の変化に耳を傾け、そこから更新をトリガすることを好むだろう?または、同じホスト上の他のディレクティブを一般的にどのように取得できますか?
これは機能しません。循環依存関係エラーが発生する:「循環依存関係をインスタンス化できません!NgModel」 – chubbsondubs
@chubbsondubsこれは私の答えのコードとは関係ありません。それはコードをどこでどのように使用するかによって異なります。 –
投稿したコードを取得し、あなたが示したのと同じように(ControlValueAccessorを実装する)コンポーネントのコンストラクタに追加しました。私はそのエラーを持っています。最高のコードは特定の状況でのみ動作します。それらが何であるか知っているといいですね。 – chubbsondubs