フォームの使い方

Tweet

自作バリデーション

名前にアルファベットしか指定できなくする場合。

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';

function alpha(c: FormControl) {
  let REGPATTERN = /^[a-zA-Z]+$/;
  if(REGPATTERN.test(c.value)) {
    return null;
  }
  else {
    return {alpha:{valid: false}}
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  myForm:FormGroup;
  message:string;

  constructor(){

  }

  get name() { return this.myForm.get('name');}

  get mail() { return this.myForm.get('mail');}

  get age() { return this.myForm.get('age');}

  ngOnInit() {
    this.myForm = new FormGroup(
      {
        name: new FormControl('', [Validators.required, alpha]),
        mail: new FormControl('', [Validators.email]),
        age: new FormControl(0, [Validators.min(1), Validators.max(150)])
      }
    )
  }

  onSubmit() {
    if(this.myForm.invalid) {
      this.message = "不正な値が入力されています";
    }
    else {
      let result = this.myForm.value;
      this.message = JSON.stringify(result);  
    }
  }
}

どのバリデーションでエラーが起きたかを調べる

app.component.html

nameはバリデーションで、必須入力と半角英数字のチェックを行っている。
どちらでエラーが起きたかは、以下のように記述する。

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div *ngIf="name.errors != null && name.errors.required != null">
    Nameは必須項目です
  </div>
  <div *ngIf="name.errors != null && name.errors.alpha != null">
    半角英数字だけ入力できます
  </div>
  <p>
    <input type="text" formControlName="name">
  </p>

  <div *ngIf="mail.invalid">メールアドレスが必要です</div>
  <p>
    <input type="text" formControlName="mail">
  </p>

  <div *ngIf="age.invalid">1以上150以下で入力してください</div>
  <p>
    <input type="number" formControlName="age">
  </p>

  <p>
    <input type="submit" value="click">
  </p>
</form>

<p>{{message}}</p>