Angular Forms (Validation)

이번에는 Angular Forms 모듈을 좀 더 활용해보도록 하죠.

유효성 검증에 대해 다뤄볼까 합니다.

보통은 keyup이나 focusout event를 받아서 처리합니다.

Angular에서는 Validator라는 것을 사용합니다.

0. Component에 Import Validators

Validators 모듈을 가져옵니다.

import { FormControl, Validators } from '@angular/forms';
...

@Component({
  ...
})
export class BudgetComponent implements OnInit{ ... }

1. Form Control에 Validators 추가

Form Control을 생성할 때 Validators를 추가합니다.

import { FormsControl, FormGroup, Validators } from '@angular/forms';
...
@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    consumptionForm = new FormGroup({
        amount: new FormControl('', [
            Validators.required,
            Validators.pattern(/^\d+$/)
        ]),
        desc: new FormControl('')
    });
    ...
}

FormControl 생성자에 2번째 변수로 넣어줬죠.

값을 입력했는지 여부를 required로 검증하구요.

Regular Expression 패턴 검증도 합니다.

amount에 숫자만 들어가는지 검증합니다.

2. Template에 Feedback 추가

유효성에 따라 적절한 Feedback을 줍니다.

<form class="consumption-form" (ngSubmit)="onAdd()" 
[formGroup]="consumptionForm">
  <mat-form-field>
    <input matInput
           formControlName="amount"
           placeholder="Amount" 
           type="text">
      <mat-error 
          *ngIf="consumptionForm.controls.amount.hasError('pattern') 
          && !consumptionForm.controls.amount.hasError('required')">
        <strong>Numbers</strong> only
      </mat-error>
      <mat-error
          *ngIf="consumptionForm.controls.amount.hasError('required')">
        Amount is <strong>required</strong>
      </mat-error>
  </mat-form-field>
  ...
  <button [disabled]="!consumptionForm.valid" 
          mat-stroked-button 
          color="accent" type="submit">Add</button>
</form>

mat-error가 아닌 span이어도 괜찮습니다.

material design 적용을 위한 태그입니다.

중요한 부분은 *ngIf directive 입니다.

(http://dschci.tistory.com/89)

FormControl에 오류가 있을 때만 표시되죠.

그리고 FormGroup도 영향을 받습니다.

FormGroup내 FormControl에 오류가 있다면

FormGroup도 유효하지 않은 상태가 되죠.

그에 따라 버튼을 disable 시켰습니다.

Angular에는 다양한 Validators가 준비되어있습니다.

자주쓰는 email 이나 최소, 최대길이 등이죠.

Validator를 직접 만들수도 있습니다.

boolean을 리턴하는 ValidatorFn을 만들면 되죠.

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null
  static compose(validators: (ValidatorFn | null | undefined)[] | null): ValidatorFn | null
  static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null
}

Validation이 적용된 화면은 아래와 같습니다.

동작 화면

작업 중인 소스는 아래에서 확인가능합니다.

소스주소: https://github.com/jsrho1023/account-book

정보출처:

https://angular.io/api/forms/Validators