Angular ReactiveFormのバリデーションとエラーメッセージをAngularMaterialで

こんにちは。レモンティーです。

今回はAngularMaterialのReactiveFormについてです。
公式↓にいろんなパーツのいろんなパターンがあるのでちょこちょこ抜き出したものです。
Angular Material

準備

AngularMaterialを導入
app.module.tsなどに
FormsModule,ReactiveFormsModule,MatFormFieldModule,MatInputModule
をインポートします。


以下はフォームを設置したいコンポーネントの話です。

TS

まずインポート

import { FormGroup,FormBuilder, Validators } from '@angular/forms';

続いてFormGroupの変数をつくり、FormBuilderを使います。
また、後々要素が取得しやすいようにget f()を書いておきます。
さらに、バリデーションによるエラーメッセージを返すメソッドも書いておきます。

  testForm:FormGroup;  

   constructor(private fb:FormBuilder) {
      this.testForm = this.fb.group({
        email:['initialValue',[Validators.required,Validators.email]],
        name:['nanashi',[Validators.required,Validators.maxLength(15)]],
        age:['90',[Validators.reqired,Validators.min(0)]]
      });
   }

  get f(){return this.testForm.controls;}

  getErrorMessage(name:string):string{
    const control = this.f[name];

    if(control.hasError('required')){
      return 'You should enter value.';
    }

    if(control.hasError('email')){
      return 'You should enter Email.';
    }

    if(control.hasError('maxlength')){
      return 'Value is too large.';
    }

    if(control.hasError('min')){
      return 'Value is too small.';
    }

  }

この例ではemailがformControlNameで、initialValueが初期値です。
その後ろの配列にはバリデーションの指定が入ります。

テンプレート

あとはテンプレートで

<form [formGroup]="testForm">

  <mat-form-field >
  <input matInput formControlName="email" type="email">
  <mat-error *ngIf="f.email.invalid">{{getErrorMessage('email')}}</mat-error>
  </mat-form-field>

  <mat-form-field >
  <input matInput formControlName="name" type="text">
  <mat-error *ngIf="f.name.invalid">{{getErrorMessage('name')}}</mat-error>
  </mat-form-field>

  <mat-form-field >
  <input matInput formControlName="age" type="number">
  <mat-error *ngIf="f.age.invalid">{{getErrorMessage('age')}}</mat-error>
  </mat-form-field>

</form>

のように書けばOKです。
AngularMaterialのデザインでバリデーションも勝手にやってくれます。

ちなみに最後に送信ボタンみたいなのを付けて
フォーム全体のバリデーションの条件を満たしている場合のみ
押せるようにしたい場合は

<button [disabled]="testForm.invalid">Send</button>

のようにするとできます。
また、一様なエラーメッセージではなく自前のclass等で柔軟に表現したい場合は

<input [ngClass]="{'クラス名',条件式}">

とすれば条件でクラスを適用できます。


今回はこれでおしまいです。

www.sawalemontea.com