Angular2 クライアント側アプリケーションを構築しています。現在、メンバーシップ コンポーネントに取り組んでおり、クライアント側コンポーネントを MVC6 vNext Identity v3 と統合しています。次のようにカスタム Angular2 パスワード検証を作成しました。
needsCapitalLetter(ctrl: Control): {[s: string]: boolean} {
if(!ctrl.value.match(/[A-Z]/))
return {'needsCapitalLetter': true}
return null;
}
needsLowerLetter(ctrl: Control): {[s: string]: boolean} {
if(!ctrl.value.match(/[a-z]/))
return {'needsLowerLetter': true}
return null;
}
needsNumber(ctrl: Control): {[s: string]: boolean} {
if(!ctrl.value.match(/\d/))
return {'needsNumber': true}
return null;
}
needsSpecialCharacter(ctrl: Control): {[s: string]: boolean} {
if(!ctrl.value.match(/[^a-zA-Z\d]/))
return {'needsSpecialCharacter': true}
return null;
}
これはうまく機能し、私は Angular2 が大好きですが、現在、「パスワードの確認」が「パスワード」と等しいことを確認する検証機能を作成しようとしています。これを行うには、1 つのフィールドを他のフィールドに対して検証できる必要があります。これはコンポーネント レベルで簡単に実行でき、ぼかしや送信、またはその他の方法でチェックするだけですが、これでは Angular2 ngForm 検証システムがバイパスされます。別のフィールドの名前またはこれに近いものを渡すことで、別のフィールドの値をチェックできるフィールド用の Angular2 検証機能を作成する方法をぜひ理解したいと思っています。これは、ほぼすべての複雑なビジネス アプリケーション UI で必須となるため、機能である必要があるようです。
ベストアンサー1
これを実装するには、完全なフォーム グループにカスタム バリデーターを割り当てる必要があります。次のようになります。
this.form = this.fb.group({
name: ['', Validators.required],
email: ['', Validators.required]
matchingPasswords: this.fb.group({
password: ['', Validators.required],
confirmPassword: ['', Validators.required]
}, {validator: this.matchValidator}) <--------
});
この方法では、グループの 1 つのコントロールだけでなく、すべてのコントロールにアクセスできるようになります。これには、controls
FormGroup のプロパティを使用してアクセスできます。FormGroup は、検証がトリガーされたときに提供されます。例:
matchValidator(group: FormGroup) {
var valid = false;
for (name in group.controls) {
var val = group.controls[name].value
(...)
}
if (valid) {
return null;
}
return {
mismatch: true
};
}
詳細については、この質問を参照してください: