☰

Angular2でのクロスフィールド検証 質問する

tag-icon • tag-icon javascript validation angular
Angular2でのクロスフィールド検証 質問する

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 つのコントロールだけでなく、すべてのコントロールにアクセスできるようになります。これには、controlsFormGroup のプロパティを使用してアクセスできます。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
  };
}

詳細については、この質問を参照してください:

おすすめ記事