序章
Angularの@angular/forms
パッケージには、required
、minLength
、maxLength
、pattern
。 ただし、検証にさらに複雑なルールまたはカスタムルールを必要とするフォームフィールドが存在する場合があります。 そのような状況では、カスタムバリデーターを使用できます。
AngularでReactiveForms を使用する場合、関数を使用してカスタムバリデーターを定義します。 バリデーターを再利用する必要がない場合は、コンポーネントファイルに関数として直接存在できます。 それ以外の場合、バリデーターを他のコンポーネントで再利用する必要がある場合は、別のファイルに存在する可能性があります。
このチュートリアルでは、URLが特定の条件を満たすかどうかを確認するために、再利用可能なカスタムバリデーターを使用してリアクティブフォームを作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- Angularプロジェクトのセットアップにある程度精通している。
このチュートリアルは、ノードv15.2.1、npm
v6.14.8、@angular/core
v11.0.0、および@angular/forms
v11.0.0で検証されました。
ステップ1-プロジェクトの設定
このチュートリアルでは、@angular/cli
で生成されたデフォルトのAngularプロジェクトからビルドします。
npx @angular/cli new angular-reactive-forms-custom-validtor-example --style=css --routing=false --skip-tests
これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。
新しく作成されたプロジェクトディレクトリに移動します。
cd angular-reactive-forms-custom-validator-example
リアクティブフォームを操作するには、FormsModule
の代わりにReactiveFormsModule
を使用します。
コードエディタでapp.module.ts
を開き、ReactiveFormsModule
を追加します。
src / app / app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ReactiveFormsModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
この時点で、ReactiveFormsModule
を使用した新しいAngularプロジェクトが作成されているはずです。
ステップ2–カスタムバリデーターを構築する
このチュートリアルのカスタムバリデーターの例では、URL文字列を取得し、https
プロトコルで始まり、.io
トップレベルドメインで終わることを確認します。
まず、ターミナルでshared
ディレクトリを作成します。
mkdir src/shared
次に、この新しいディレクトリに、新しいurl.validator.ts
ファイルを作成します。 このファイルをコードエディタで開き、次のコード行を追加します。
src / shared / url.validator.ts
import { AbstractControl } from '@angular/forms'; export function ValidateUrl(control: AbstractControl) { if (!control.value.startsWith('https') || !control.value.includes('.io')) { return { invalidUrl: true }; } return null; }
このコードは、FormControl
、FormGroup
、およびFormArray
の基本クラスであるNoticeAbstractControl
クラスを使用します。 これにより、FormControl
の値にアクセスできます。
このコードは、値startsWith
がhttps
の文字列であるかどうかを確認します。 また、値includes
が.io
の文字列であるかどうかも確認します。
検証が失敗した場合、エラー名のキーinvalidUrl
、および値true
を持つオブジェクトが返されます。
それ以外の場合、検証に合格すると、null
が返されます。
この時点で、カスタムバリデーターを使用する準備が整いました。
ステップ3–カスタムバリデーターの使用
次に、userName
とwebsiteUrl
を取るフォームを作成します。
app.component.ts
を開き、コンテンツを次のコード行に置き換えます。
src / app / app.component.ts
import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ValidateUrl } from '../shared/url.validator'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { myForm: FormGroup; constructor(private fb: FormBuilder) {} ngOnInit() { this.myForm = this.fb.group({ userName: ['', Validators.required], websiteUrl: ['', [Validators.required, ValidateUrl]] }); } saveForm(form: FormGroup) { console.log('Valid?', form.valid); // true or false console.log('Username', form.value.userName); console.log('Website URL', form.value.websiteUrl); } }
このコードでは、websiteUrl
フォームコントロールは組み込みのValidators.required
とカスタムValidateUrl
バリデーターの両方を使用します。
ステップ4–テンプレートのエラーにアクセスする
フォームを操作するユーザーは、検証に失敗している値に関するフィードバックが必要になります。 コンポーネントテンプレートでは、カスタムバリデーターの戻り値で定義したキーを使用できます。
app.component.html
を開き、コンテンツを次のコード行に置き換えます。
src / app / app.component.html
<form [formGroup]="myForm" ngSubmit)="saveForm(myForm)"> <div> <label> Username: <input formControlName="userName" placeholder="Your username"> </label> <div *ngIf="( myForm.get('userName').dirty || myForm.get('userName').touched ) && myForm.get('userName').invalid" > Please provide your username. </div> </div> <div> <label> Website URL: <input formControlName="websiteUrl" placeholder="Your website"> </label> <div *ngIf="( myForm.get('websiteUrl').dirty || myForm.get('websiteUrl').touched ) && myForm.get('websiteUrl').invalid" > Only URLs served over HTTPS and from the .io top-level domain are accepted. </div> </div> </form>
この時点で、アプリケーションをコンパイルできます。
npm start
そしてそれをあなたのウェブブラウザで開きます。 userName
およびwebsiteUrl
のフィールドを操作できます。 ValidateUrl
のカスタムバリデーターが、https
および.io
の条件を満たす値で期待どおりに機能することを確認します:https://example.io
。
結論
この記事では、Angularアプリケーションのリアクティブフォーム用に再利用可能なカスタムバリデーターを作成しました。
テンプレート駆動型フォームとリアクティブフォームのカスタムバリデーターの例については、Angularのカスタムフォームバリデーターを参照してください。
Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。