#2 Ionic4(아이오닉4) Validation 체크

로그인 화면

 

1. 필요한 모듈 import를 한다.

import {AlertController} from '@ionic/angular';
import { FormGroup, FormControl, FormBuilder, Validator, ReactiveFormsModule, Validators} from '@angular/forms';
import { Router } from '@angular/router';

2. constructor에 추가해준다.

  constructor(
      public alertCtrl: AlertController,
      public formBuilder: FormBuilder,
      public reactiveFormsModule : ReactiveFormsModule,
      public router: Router
    ) {}

3. Html을 구성한다.

<ion-header>
  <ion-toolbar>
    <ion-title>로그인</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
    <form [formGroup]="frm">
      <ion-item>
          <ion-label position="floating"><font color="red">*</font>&nbsp;E-mail</ion-label>
        <ion-input formControlName="email" name="inputEmail" type="text"></ion-input>
      </ion-item>

      <div class="error-messages">
        <ng-container *ngFor="let error of error_message.email">
            <div class="error-message" *ngIf="frm.get('email').hasError(error.type) && (frm.get('email').dirty || frm.get('email').touched)">
                {{ error.message }}
              </div>
        </ng-container>
      </div>

      <ion-item>
          <ion-label position="floating"><font color="red">*</font>&nbsp;Password</ion-label>
        <ion-input formControlName="password" name="inputPW" type="password"></ion-input>
      </ion-item>

      <div class="error-messages">
          <ng-container *ngFor="let error of error_message.password">
              <div class="error-message" *ngIf="frm.get('password').hasError(error.type) && (frm.get('password').dirty || frm.get('password').touched)">
                  {{ error.message }}
                </div>
          </ng-container>
        </div>

      <ion-button (click)="submit()" [disabled]=!frm.valid shape="round" size="default" color="primary" expand="block">Login</ion-button>
  </form>

  <div text-center>
      <p style="font-size: 0.5em; color: rgb(1, 120, 255)">Copyright ⓒ test. All rights reserved.</p>
  </div>

</ion-content>

<form[formGroup]="frm"= formgroup name 설정

formControlName = input name 지정

button (click)="메소드명()" = Javascript onclick()과 비슷

[disabled]=!frm.valid = invalid일 경우 button disabled

 

Validation 조건문 대입

frm : FormGroup; //FormGroup 변수

  constructor(
    public alertCtrl: AlertController,
    public formBuilder: FormBuilder,
    public reactiveFormsModule : ReactiveFormsModule,
    public router: Router
    ) {
      this.frm =  this.formBuilder.group({
        email: new FormControl('',Validators.compose([
          Validators.required,
          Validators.minLength(6),
          Validators.maxLength(30),
          Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
        ])),
        password: new FormControl('', Validators.compose([
          Validators.required,
          Validators.minLength(6),
          Validators.maxLength(50),
          Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
        ]))
    });
  }

 

ErrorMessage 설정

  error_message = {
    'email': [
        { type: 'required', message: '이메일 주소를 적어주세요.' },
        { type: 'minlength', message: '최소 6자 이상 입력해주세요.' },
        { type: 'maxlength', message: '최대 30자 미만 입력해주세요.' },
        { type: 'pattern', message: '올바르지 않은 이메일입니다.' }
      ],
      'password': [
        { type: 'required', message: '비밀번호를 입력해주세요.' },
        { type: 'minlength', message: '최소 6자 이상 입력해주세요.' },
        { type: 'maxlength', message: '최대 30자 미만 입력해주세요.' },
        { type: 'pattern', message: '올바르지 않은 비밀번호입니다.' }
      ],
  }

 

버튼 클릭시 페이지이동 및 Alert 생성

  submit(){
    this.router.navigateByUrl('/map');
    this.presentAlert();
  }

  async presentAlert() {
    const alert = await this.alertCtrl.create({
      header: 'Success',
      message: 'Welcome :)',
      buttons: ['OK']
    });
    return await alert.present();
  }