소개

Angular은 HTML, CSS 및 TypeScript(JavaScript)를 사용하여 WEB, 모바일 및 데스크톱 애플리케이션을 구축하기 위한 개발 플랫폼입니다. 현재 Angular는 버전 13이며 Google이 프로젝트의 주요 유지 관리자입니다.

양식 유효성 검사는 사용자 입력 데이터의 품질, 정확성 및 무결성을 가능하게 합니다. 하나는 reactive forms(구성 요소 클래스의 함수 사용)을 사용하고 다른 하나는 template-driven forms(HTML의 속성 사용)을 사용하는 두 가지 방법으로 Angular에서 양식의 유효성을 검사할 수 있으며 반응형 양식 방식을 사용합니다.

전제 조건

시작하기 전에 도구를 설치하고 구성해야 합니다.

git

Node.js and npm

Angular CLI

IDE(예: Visual Studio Code 또는 WebStorm )

시작하기

Angular 애플리케이션 만들기

1. 경로 파일 및 SCSS 스타일 형식과 함께 @angular/cli를 사용하여 Angular 기본 구조로 애플리케이션을 생성해 보겠습니다.

ng new angular-reactive-form-validation --routing true --style scss
CREATE angular-reactive-form-validation/README.md (1083 bytes)
CREATE angular-reactive-form-validation/.editorconfig (274 bytes)
CREATE angular-reactive-form-validation/.gitignore (548 bytes)
CREATE angular-reactive-form-validation/angular.json (3363 bytes)
CREATE angular-reactive-form-validation/package.json (1095 bytes)
CREATE angular-reactive-form-validation/tsconfig.json (863 bytes)
CREATE angular-reactive-form-validation/.browserslistrc (600 bytes)
CREATE angular-reactive-form-validation/karma.conf.js (1449 bytes)
CREATE angular-reactive-form-validation/tsconfig.app.json (287 bytes)
CREATE angular-reactive-form-validation/tsconfig.spec.json (333 bytes)
CREATE angular-reactive-form-validation/.vscode/extensions.json (130 bytes)
CREATE angular-reactive-form-validation/.vscode/launch.json (474 bytes)
CREATE angular-reactive-form-validation/.vscode/tasks.json (938 bytes)
CREATE angular-reactive-form-validation/src/favicon.ico (948 bytes)
CREATE angular-reactive-form-validation/src/index.html (315 bytes)
CREATE angular-reactive-form-validation/src/main.ts (372 bytes)
CREATE angular-reactive-form-validation/src/polyfills.ts (2338 bytes)
CREATE angular-reactive-form-validation/src/styles.scss (80 bytes)
CREATE angular-reactive-form-validation/src/test.ts (745 bytes)
CREATE angular-reactive-form-validation/src/assets/.gitkeep (0 bytes)
CREATE angular-reactive-form-validation/src/environments/environment.prod.ts (51 bytes)
CREATE angular-reactive-form-validation/src/environments/environment.ts (658 bytes)
CREATE angular-reactive-form-validation/src/app/app-routing.module.ts (245 bytes)
CREATE angular-reactive-form-validation/src/app/app.module.ts (393 bytes)
CREATE angular-reactive-form-validation/src/app/app.component.scss (0 bytes)
CREATE angular-reactive-form-validation/src/app/app.component.html (23364 bytes)
CREATE angular-reactive-form-validation/src/app/app.component.spec.ts (1151 bytes)
CREATE angular-reactive-form-validation/src/app/app.component.ts (237 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

2. 부트스트랩 CSS 프레임워크를 설치하고 구성합니다. 게시물의 2단계와 3단계를 수행합니다.

3. 이메일 필드에 대한 사용자 지정 유효성 검사기를 생성해 보겠습니다. EmailValidatorDirective 지시문을 만듭니다.

ng generate directive email-validator --skip-tests=true
CREATE src/app/email-validator.directive.ts (157 bytes)
UPDATE src/app/app.module.ts (592 bytes)

4. src/app/email-validator.directive.ts 파일을 변경합니다. 아래와 같이 emailValidator 함수와 EmailValidatorDirective 클래스를 생성합니다.

import { Directive } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, Validator, ValidationErrors, ValidatorFn } from '@angular/forms';

export function emailValidator(): ValidatorFn {

  const EMAIL_REGEXP = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

  return (control: AbstractControl): ValidationErrors | null => {
    const isValid = EMAIL_REGEXP.test(control.value);

    if (isValid) {
      return null;
    } else {
      return {
        emailValidator: {
          valid: false,
        },
      };
    }
  };

}

@Directive({
  selector: '[appEmailValidator]',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: EmailValidatorDirective,
    multi: true,
  }],
})
export class EmailValidatorDirective implements Validator {

  constructor() {
  }

  public validate(control: AbstractControl): ValidationErrors | null {
    return emailValidator()(control);
  }

}

5. src/app/app.component.ts 파일을 변경합니다. NgForm 서비스를 가져와서 IUser 인터페이스를 만들고 아래와 같이 validate 함수를 만듭니다.

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

import { emailValidator } from './email-validator.directive';

interface IUser {
  name: string;
  nickname: string;
  email: string;
  password: string;
  showPassword: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {

  reactiveForm!: FormGroup;
  user: IUser;

  constructor() {
    this.user = {} as IUser;
  }

  ngOnInit(): void {
    this.reactiveForm = new FormGroup({
      name: new FormControl(this.user.name, [
        Validators.required,
        Validators.minLength(1),
        Validators.maxLength(250),
      ]),
      nickname: new FormControl(this.user.nickname, [
        Validators.maxLength(10),
      ]),
      email: new FormControl(this.user.email, [
        Validators.required,
        Validators.minLength(1),
        Validators.maxLength(250),
        emailValidator(),
      ]),
      password: new FormControl(this.user.password, [
        Validators.required,
        Validators.minLength(15),
      ]),
    });
  }

  get name() {
    return this.reactiveForm.get('name')!;
  }

  get nickname() {
    return this.reactiveForm.get('nickname')!;
  }

  get email() {
    return this.reactiveForm.get('email')!;
  }

  get password() {
    return this.reactiveForm.get('password')!;
  }

  public validate(): void {
    if (this.reactiveForm.invalid) {
      for (const control of Object.keys(this.reactiveForm.controls)) {
        this.reactiveForm.controls[control].markAsTouched();
      }
      return;
    }

    this.user = this.reactiveForm.value;

    console.info('Name:', this.user.name);
    console.info('Nickname:', this.user.nickname);
    console.info('Email:', this.user.email);
    console.info('Password:', this.user.password);
  }

}

6. src/app/app.component.html 파일을 변경합니다. 아래와 같이 양식을 추가합니다.

<div class="container-fluid py-3">
  <h1>Angular Reactive Form Validation</h1>

  <div class="row justify-content-center my-5">
    <div class="col-4">
      <form [formGroup]="reactiveForm" #form="ngForm">
        <div class="row">
          <div class="col mb-2">
            <label for="name" class="form-label">Name:</label>
            <input type="text" id="name" name="name" formControlName="name" placeholder="Your name" required minlength="1" maxlength="250" class="form-control form-control-sm" [class.is-invalid]="name.invalid && (name.dirty || name.touched)">
            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="invalid-feedback">
              <div *ngIf="name.errors?.['required']">
                This field is required.
              </div>
              <div *ngIf="name.errors?.['minlength']">
                This field must have at least 1 character.
              </div>
              <div *ngIf="name.errors?.['maxlength']">
                This field must have at most 250 characters.
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col mb-2">
            <label for="nickname" class="form-label">Nickname:</label>
            <input type="text" id="nickname" name="nickname" formControlName="nickname" placeholder="Your nickname" maxlength="10" class="form-control form-control-sm" [class.is-invalid]="nickname.invalid && (nickname.dirty || nickname.touched)">
            <div *ngIf="nickname.invalid && (nickname.dirty || nickname.touched)" class="invalid-feedback">
              <div *ngIf="nickname.errors?.['maxlength']">
                This field must have at most 10 characters.
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col mb-2">
            <label for="email" class="form-label">Email:</label>
            <input type="email" id="email" name="email" formControlName="email" placeholder="[email protected]" required minlength="1" maxlength="250" class="form-control form-control-sm" [class.is-invalid]="email.invalid && (email.dirty || email.touched)">
            <div *ngIf="email.invalid && (email.dirty || email.touched)" class="invalid-feedback">
              <div *ngIf="email.errors?.['required']">
                This field is required.
              </div>
              <div *ngIf="email.errors?.['minlength']">
                This field must have at least 1 character.
              </div>
              <div *ngIf="email.errors?.['maxlength']">
                This field must have at most 250 characters.
              </div>
              <div *ngIf="!email.errors?.['required'] && !email.errors?.['minlength'] && !email.errors?.['maxlength'] && email.errors?.['emailValidator']">
                Invalid email format.
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col mb-2">
            <label for="password" class="form-label">Password:</label>
            <div class="input-group input-group-sm has-validation">
              <input [type]="user.showPassword ? 'text' : 'password'" id="password" name="password" formControlName="password" required minlength="15" class="form-control form-control-sm" [class.is-invalid]="password.invalid && (password.dirty || password.touched)">
              <button type="button" class="btn btn-outline-secondary" (click)="user.showPassword = !user.showPassword">
                <i class="bi" [ngClass]="{'bi-eye-fill': !user.showPassword, 'bi-eye-slash-fill': user.showPassword}"></i>
              </button>
              <div *ngIf="password.invalid && (password.dirty || password.touched)" class="invalid-feedback">
                <div *ngIf="password.errors?.['required']">
                  This field is required.
                </div>
                <div *ngIf="password.errors?.['minlength']">
                  This field must have at least 15 characters.
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col mb-2 d-grid">
            <button type="button" class="btn btn-sm btn-primary" (click)="validate()">Validate</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

7. src/app/app.module.ts 파일을 변경합니다. 아래와 같이 ReactiveFormsModule 모듈과 EmailValidatorDirective 지시문을 가져옵니다.

import { ReactiveFormsModule } from '@angular/forms';

import { EmailValidatorDirective } from './email-validator.directive';

declarations: [
  AppComponent,
  EmailValidatorDirective,
],
imports: [
  BrowserModule,
  ReactiveFormsModule,
  AppRoutingModule,
],

8. 아래 명령으로 애플리케이션을 실행합니다.

npm start

> angular-reactive-form-validation@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.25 MB | 
styles.css, styles.js | styles        | 454.68 kB | 
polyfills.js          | polyfills     | 294.84 kB | 
scripts.js            | scripts       |  76.33 kB | 
main.js               | main          |  27.76 kB | 
runtime.js            | runtime       |   6.56 kB | 

                      | Initial Total |   3.09 MB

Build at: 2022-03-21T00:40:49.519Z - Hash: af669f909d9510f8 - Time: 3254ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

9. 준비! URLhttp://localhost:4200/에 접속하여 애플리케이션이 작동하는지 확인합니다. GitHub Pages 및 Stackblitz에서 작동하는 응용 프로그램을 참조하십시오.



응용 프로그램 저장소는 https://github.com/rodrigokamada/angular-reactive-form-validation에서 사용할 수 있습니다.

이 자습서는 내blog에 포르투갈어로 게시되었습니다.