ホームページ  >  記事  >  ウェブフロントエンド  >  リアクティブフォームのカスタムバリデーター

リアクティブフォームのカスタムバリデーター

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-19 16:25:562090ブラウズ

今回はReactive Formのカスタムvalidatorについてご紹介します。 Reactive Formのカスタムバリデーターを使用する際の注意事項を実際に見てみましょう。

この記事では、Angular (Angular2+) のリアクティブ フォームの関連コンテンツを紹介します:

  • リアクティブ フォームの作成方法

  • 検証の使用方法

  • カスタム バリデータ

以下のテキストを開始!

リアクティブフォームの作成方法

まず、FormBuilder を使用して次のように FormGroup を作成する必要があります:

registerForm: FormGroup;
constructor(
    private fb: FormBuilder,
) {}
ngOnInit() {
  this.registerForm = this.fb.group({
    firstName: [''],
    lastName: [''],
  })
}
上記の firstNamelastName は自分で取得したもので、それぞれフォームコントロール名。

その後、HTML ページは次のようになります: firstNamelastName是由你自己取的,分别表示一个表单控件名称。
然后HTML页面就像这样:

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
  <label>FirstName:</label>
  <input formControlName="firstName">
  <label>LastName:</label>
  <input formControlName="lastName">
  <button type="submit">Submit</button>
</form>

这样就创建了一个非常简单的表单!

如何使用验证

表单的输入项经常是要进行验证的,那该怎么验证呢?
其实很简单,Angular已经为我们写好了一些常用的验证器,就像这样使用就可以了:

ngOnInit() {
  this.registerForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', Validators.pattern('[A-Za-z0-9]*')],
  })
}

可以使用“必要”验证器,也可以使用正则,你只需传入一个正则表达式就可以了。除此之外,还有minLengthmaxLength等。
如果一个控件需要多个验证器,可以把它们放在一个数组里面:

lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]]

如果你希望在输入时得到一些提示,可以这样写你的HTML:

<form [formGroup]="registerForm" (ngSubmit)="handleSubmit(registerForm)">
  <label>FirstName:</label>
  <input formControlName="firstName">
  <p *ngIf="registerForm.controls.firstName.touched && registerForm.controls.firstName.invalid">
    This field is required!
  </p>
  <label>LastName:</label>
  <input formControlName="lastName">
  <p *ngIf="registerForm.controls.lastName.hasError(&#39;pattern&#39;)">
    Invalid input!
  </p>
  <button type="submit" [disabled]="!registerForm.valid">Submit</button>
</form>

第一个控件,在你“touch”过又为空的情况下会给出提示;第二个控件,在输入不符合正则表达式规则的情况下给出提示,hasError方法还可以传入requiredminLength等参数,分别对应不同的验证器;最后,在输入还未符合规则的时候,Submit按钮是处于禁用状态的。

Angular提供的几个验证器在实际项目中往往是不够用的,因此我们需要自定义验证器,以满足我们的业务需求!

自定义验证器

验证器其实就是一个有着return

export function validateUrl(control: AbstractControl){
  if(control.value){
    if(!control.value.startsWith('www') || !control.value.includes('.io')){
      return {
        inValidUrl: true
      }
    }
  }
  return null;
}

これにより、非常に単純なフォームが作成されます。

認証の使い方

フォームの入力項目は認証が必要なことが多いのですが、どうやって認証するのでしょうか?

これは実際には非常に簡単です。Angular には、一般的に使用されるバリデーターがすでに用意されています。次のように使用します。

this.registerForm = this.fb.group({
    firstName: ['', Validators.required],
    lastName: ['', [Validators.pattern('[A-Za-z0-9]*'), Validators.required]],
    website: ['', validateUrl], // <---
})
「必要な」バリデーターまたは正規表現を使用するだけです。 http://www.php.cn/wiki/1548.html" target="_blank">正規表現

が役に立ちます。さらに、minLengthmaxLength などがあります。

コントロールに複数のバリデーターが必要な場合は、それらを配列に入れることができます:

<label>Website:</label>
  <input formControlName="website">
    <p *ngIf="registerForm.controls.website.invalid">
    Url must starts with www and includes .io
  </p>
入力時にいくつかのプロンプトを取得したい場合は、次のように HTML を書くことができます:

rrreee「タッチ」した後、最初のコントロールは空です。入力が正規表現ルールに準拠していない場合、2 番目のコントロールはプロンプトを表示します。hasError メソッドは、required や などの <code> パラメータを渡すこともできます。 >minLength はそれぞれ異なるバリデータに対応し、最終的に、入力がルールに準拠していない場合、[送信] ボタンが無効になります。
Angular が提供するいくつかのバリデーターは実際のプロジェクトでは十分ではないことが多いため、ビジネス ニーズを満たすようにバリデーターをカスタマイズする必要があります。

カスタムバリデーター バリデーターは実際には return を持つメソッドです。
次に、URL 入力ボックスの値がルールに準拠しているかどうかを検証するバリデータを作成しましょう:

rrreee🎜 入力値が「www」で始まり「.io」が含まれているかどうかをテストします。次に、Angular が提供するバリデーターと同じメソッドを使用します: 🎜rrreee🎜 次に、必要に応じてプロンプトを取得できるように、次のように HTML を記述します: 🎜rrreee🎜 OK、今日はここまでです。 🎜🎜この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨書籍: 🎜🎜🎜JavaScript DOM の最適化🎜🎜🎜🎜🎜WeChat アプレットで双方向データ バインディングを実装する方法🎜🎜🎜

以上がリアクティブフォームのカスタムバリデーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。