Angular에서 반응형 양식에 대한 사용자 지정 유효성 검사기를 만드는 방법

소개

Angular의 @angular/forms 패키지는 required, minLength와 같은 유용한 내장 검사기를 지원하는 Validators 클래스와 함께 제공됩니다. , maxLength 및 패턴. 그러나 확인을 위해 더 복잡하거나 사용자 지정 규칙이 필요한 양식 필드가 있을 수 있습니다. 이러한 상황에서 사용자 지정 유효성 검사기를 사용할 수 있습니다.

Angular에서 반응형 양식을 사용할 때 함수로 사용자 지정 유효성 검사기를 정의합니다. 유효성 검사기를 재사용할 필요가 없는 경우 구성 요소 파일에 직접 함수로 존재할 수 있습니다. 그렇지 않고 유효성 검사기를 다른 구성 요소에서 재사용해야 하는 경우 별도의 파일에 존재할 수 있습니다.

이 자습서에서는 URL이 특정 조건을 충족하는지 확인하기 위해 재사용 가능한 사용자 지정 유효성 검사기로 반응형 양식을 구성합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
Angular 프로젝트 설정에 어느 정도 익숙합니다.

이 튜토리얼은 Node 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을 추가합니다.

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 파일을 만듭니다. 코드 편집기에서 이 파일을 열고 다음 코드 줄을 추가합니다.

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의 기본 클래스인 알림 AbstractControl 클래스를 사용합니다. 에스. 이렇게 하면 FormControl의 값에 액세스할 수 있습니다.

이 코드는 startsWith 값이 https에 대한 문자열인지 확인합니다. 또한 값이 .io에 대한 문자열을 포함하는지 확인합니다.

유효성 검사가 실패하면 오류 이름에 대한 키인 invalidUrl과 값이 true인 객체를 반환합니다.

그렇지 않고 유효성 검사가 통과되면 null을 반환합니다.

이 시점에서 사용자 지정 유효성 검사기를 사용할 준비가 되었습니다.

3단계 – 사용자 지정 유효성 검사기 사용

다음으로 userName 및 websiteUrl을 사용하는 양식을 만듭니다.

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을 열고 콘텐츠를 다음 코드 줄로 바꿉니다.

<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: //예제.io.

결론

이 문서에서는 Angular 애플리케이션의 반응형 양식에 대해 재사용 가능한 사용자 지정 유효성 검사기를 만들었습니다.

템플릿 기반 양식 및 반응형 양식의 사용자 지정 유효성 검사기의 예는 Custom Form Validation in Angular를 참조하십시오.

Angular에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Angular 주제 페이지를 확인하세요.