Angular を操作してテンプレート駆動フォームのカスタム検証機能を実装する方法-jsチュートリアル-php.cn

Angular を操作してテンプレート駆動フォームのカスタム検証機能を実装する方法

php中世界最好的语言

リリース： 2018-05-29 10:36:31

オリジナル

1231 人が閲覧しました

今回は、Angularを使用してテンプレート駆動フォームのカスタム検証機能を実装する方法を説明します。 Angularを使用してテンプレート駆動フォームのカスタム検証機能を実装する際に注意する必要がある注意事項について説明します。 . 次に実際のケースを見てみましょう。

HTML5 のネイティブフォーム検証属性 (必須、長さ制限、値の間隔、

正規表現など) は通常の検証ニーズを満たすことができますが、パスワード確認、時間/値の登録時など、一部のシナリオではカスタム検証を使用する必要があります。比較関係のある選択、値の検証のためにサーバーにリクエストする必要があるなど... ここではパスワードの確認を例に挙げます。

コマンド開発

フォームの検証ステータスはformControlのerrors属性を通じてフィードバックされるため、基本的な考え方は検証ルールを追加し、検証結果をformControlインスタンスのerrors属性に追加することです。。ここで問題が発生します。テンプレート駆動型フォームのコントロールは HTML テンプレート内で完了しており、formControl インスタンスに直接アクセスできません。現時点では、指示を使用して検査ルールをパッケージ化する必要があります。 Angular は、フォームのカスタム検証を処理するための

validatorprovider NG_VALIDATORS を提供します。まずディレクティブを作成します。

import { Directive} from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms';
@Directive({
 selector: '[appConfirmpsw]',
 providers: [{
  provide : NG_VALIDATORS,
  useExisting : ConfirmpswDirective,
  multi: true
 }]
})
export class ConfirmpswDirective implements Validator {
 constructor() {
  }
 validate(control: AbstractControl): {[key: string]: any} {
   //检验规则
 }
}

ログイン後にコピー

1. 命令 NG_VALIDATORS のプロバイダー、エイリアスクラス confirmpswDirective を指定し、multi が true (同じトークンを使用して異なるプロバイダーを登録できます)。 NG_VALIDATORS プロバイダーに登録されたディレクティブであるため、Angular の検証プロセスで認識できます。新しいインスタンスが作成されないように useExisting に登録する必要があることに注意してください。

2. Validator インターフェースを使用してカスタム命令を制約するこれは Angular が提供する Validator クラスです。 validate 属性があり、フォームの formControl に渡され、ValidationErrors オブジェクトが返されます。

コマンド構造が完成したので、検証部分が始まります。まず、入力されたパスワードを渡す必要があるため、@input を追加し、バインドされたフォームの値が入力された値と同じかどうかを判断するための検証ルールを指定します。このコマンドの使用を回避するには、次のようにする必要があります。属性 ( <input type="password" appconfirmpsw [confirmpsw]="'xxx'" >) を追加で渡すため、コマンド名 appconfirmpsw をconfirmpsw のエイリアスとして使用します。 For <input type="password" [appconfirmpsw] = "'xxx'"> の値を渡す方が便利で簡単です。

値を比較して結果を返すためのテスト関数がここに特別に書かれています。コマンドの検証で必ず

@Input('appConfirmpsw') confirmpsw: string;

ログイン後にコピー

<input type="password" appConfirmpsw [confirmpsw]="'xxx'" >)，所以我们将指令名称appConfirmpsw作为confirmpsw的别名，这样传值会比较方便，简化为 <input type="password" [appConfirmpsw] = "'xxx'">。

　　这里专门写一个检验函数，用来比对值和返回结果。记得在指令的validate中调用一下

export function comfirmPswValidator(_confirmpsw: string): ValidatorFn { //传入已输入的密码值 ， 返回一个ValidatorFn
 return (control: AbstractControl): {[key: string]: any} => { //传入绑定表单的formControl
  if ( !control.value ) { //如果绑定未输入值，则返回 required错误
   return { 'required' : true };
  }
　　//如果两次输入的值不相同，则返回confirmpsw的错误
  return control.value !== _confirmpsw ? {'confirmpsw' : {value: true}} : null;
 };
}

ログイン後にコピー

　　完整指令如下：

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidatorFn} from '@angular/forms';
@Directive({
 selector: '[appConfirmpsw]',
 providers: [{
  provide : NG_VALIDATORS,
  useExisting : ConfirmpswDirective,
  multi: true
 }]
})
export class ConfirmpswDirective implements Validator {
 @Input('appConfirmpsw') confirmpsw: string;
 constructor() {
  }
 validate(control: AbstractControl): {[key: string]: any} {
  console.log(this.confirmpsw);
  return this.confirmpsw ? comfirmPswValidator(this.confirmpsw)(control) : null;
 }
}
export function comfirmPswValidator(_confirmpsw: string): ValidatorFn {
 return (control: AbstractControl): {[key: string]: any} => {
  if ( !control.value ) {
   return { 'required' : true };
  }
  return control.value !== _confirmpsw ? {'confirmpsw' : {value: true}} : null;
 };
}

ログイン後にコピー

　使用

　　测试一下指令的效果吧

 <p class="input-group">
   <label class="group-label" for="psw-new"> 新密码 ：</label>
   <input class="group-input" [(ngModel)]="inputpsw.new" #new="ngModel" type="password" name="psw" id="psw-new" required>
  </p>
  <p class="input-group input-error" *ngIf="new.touched&&new.invalid">
   <p class="group-error-content" *ngIf="new.errors?.required">确认密码为必填项！</p>
  </p>
  <p class="input-group">
   <label class="group-label" for="psw-confirm">确认密码 ：</label>
   <input class="group-input" [(ngModel)]="inputpsw.confirm" #confirm="ngModel" type="password" name="confirm" id="psw-confirm"
   [appConfirmpsw] = "new.value" required>
  </p>
  <p class="input-group input-error" *ngIf="confirm.touched&&confirm.invalid">
   <p class="group-error-content" *ngIf="confirm.errors?.required">新密码为必填项！</p>
   <p class="group-error-content" *ngIf="confirm.errors?.confirmpsw">密码输入不一致！</p>
  </p>

ログイン後にコピー

　　传入new表单的值，并通过errors.confirmpsw を呼び出してください。完全なコマンドは次のとおりです:

rrreee