Angular 반응형 폼 검증

    What are reactive forms in Angular?

    Angular의 반응형 폼은 기본 폼 객체 모델에 직접 액세스하여 폼 입력을 처리하는 불변적이고 명시적인 접근 방식을 제공합니다. 이러한 입력의 값이 시간에 따라 변경됨에 따라 폼의 상태는 고정 또는 비융통성 있는 방법에 의존하여 반응형 폼에 의해 관리됩니다.

    즉, 데이터 모델에 변경 사항이 발생할 때마다 소위 관찰 가능한 연산자가 기존 데이터 모델을 계속해서 업데이트하는 대신 새로운 데이터 모델을 반환한다는 의미입니다. 그리고 이는 양식의 상태를 깨끗하게 유지합니다.

    Angular 반응형 폼은 다음과 같은 이유로 매우 확장성이 뛰어나고 재사용 가능하며 견고한 것으로 간주됩니다.

    불변성

    Angular의 반응형 폼은 불변 또는 고정 데이터 구조를 제공합니다. 기본 모델의 상태가 변경되면 업데이트된 이 특정 모델의 새 "버전"을 얻습니다. 새 값이 있지만 언제든지 모든 (UI) 컨트롤과 일치합니다.

    더 나은 테스트 용이성

    반응형 양식을 사용하면 테스트가 매우 간단하며 설정이 덜 필요합니다. 대규모 애플리케이션의 경우 이는 매우 유용합니다. 여기서는 입력 스트림에 대한 동기식 액세스를 얻을 수 있으며 UI를 렌더링하지 않고도 양식과 데이터 모델을 테스트할 수 있습니다.

    예측 가능성

    반응형 양식은 양식의 모든 고유한 변경 사항을 추적하고 입력 값에 동기식으로 액세스할 수 있는 관찰 가능한 스트림을 중심으로 구축됩니다(잘 구조화된 데이터 흐름 덕분에). 결과적으로 반응성 형태를 매우 예측 가능하게 만듭니다.

    일관되고 구조화된 데이터 흐름

    Angular 반응형 폼의 데이터 흐름은 폼 로직이 컴포넌트 클래스에 의해 주도되기 때문에 잘 구조화되어 있습니다. 이를 통해 컴포넌트 클래스의 FormControl 인스턴스에 직접 검증기 함수를 추가할 수 있습니다. 변경이 발생할 때마다 Angular 이러한 함수를 호출합니다.

    What is angular form validation?

    Angular 폼 검증은 사용자가 웹 폼에 입력한 모든 내용이 올바르고 완전한지 확인하는 필수적인 기술 프로세스입니다. 템플릿 기반 방식이나 Angular 반응형 폼으로 검증을 관리할 수 있습니다. 입력 내용에 따라 폼은 사용자가 계속 진행하도록 허용하거나 사용자가 데이터 입력에서 잘못된 부분을 알 수 있도록 특정 오류 메시지를 표시합니다.

    어떤 유효성 검사기에 실패했는지에 따라 화면 오류 메시지가 피드백을 제공하여 무엇이 잘못되었는지, 정확히 무엇을 데이터로 채우거나 다시 입력해야 하는지 알려줍니다. 일반적으로 앱은 양식을 사용하여 사용자가 가입, 로그인, 온라인 프로필 업데이트, 민감한 정보 제출 등과 같은 데이터 입력 작업을 수행할 수 있도록 합니다.

    Angular 폼 입력 값이 변경될 때마다 폼 검증을 실행하고 사용자가 웹 폼에 입력한 데이터 입력이 정확하고 완전한지 확인합니다. 이를 제대로 수행하기 위해 Angular 발생하는 모든 변경에 대해 실행되는 검증자 목록을 호출합니다.

    UI에서 사용자 입력의 검증은 템플릿 기반 양식이나 Angular 반응형 양식으로 수행할 수 있습니다. 이 두 양식은 모두 다음 기본 클래스에 기반합니다.

    • 양식컨트롤
    • 양식 그룹
    • 양식배열
    • ControlValue접근자

    Angular 반응형 폼 검증

    반응형 양식은 시간에 따라 값이 변하는 양식 입력 관리에 대한 모델 기반 접근 방식을 제공합니다. 반응형 양식은 구성 요소 클래스를 기반으로 구축되므로 Angular 반응형 양식 유효성 검사는 구성 요소 클래스의 양식 제어 모델에 유효성 검사기 기능을 직접 추가하여 발생합니다.

    값이 유효하면 유효성 검사기는 null 반환합니다. 값이 유효하지 않은 경우 유효성 검사기는 일련의 오류를 생성하며 화면에 특정 오류 메시지를 표시할 수 있습니다.

    ​required, minlength, maxlength 등과 같은 내장 유효성 검사기가 있습니다. 그러나 자신만의 유효성 검사기를 만들 수도 있습니다.

    간단한 사용자 정의 반응형 유효성 검사기는 다음과 같습니다.

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

@Directive({
    selector: '[dateValueValidator]',
    providers: [{ provide: NG_VALIDATORS, useExisting: DateValueValidatorDirective, multi: true }]
})
export class DateValueValidatorDirective implements Validator {
    public validate(control: AbstractControl): ValidationErrors | null {
        if (!this.isDate(control.value)) {
            return { value: true };
        }

        return null;
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}
typescript

    또한 유효성 검사기는 비동기식일 수 있습니다.

    import { Directive, OnInit } from '@angular/core';
import { AsyncValidator, NG_ASYNC_VALIDATORS, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable, of } from 'rxjs';

@Directive({
    selector: '[dateValueAsyncValidator]',
    providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: DateValueAsyncValidatorDirective, multi: true }]
})
export class DateValueAsyncValidatorDirective implements AsyncValidator {
    public validate(control: AbstractControl): Observable<ValidationErrors | null> {
        if (!this.isDate(control.value)) {
            return of({ value: true });
        }

        return of(null);
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}
typescript

    Angular Reactive form validation example

    이 Angular 형식 유효성 검사 예제를 통해 실제로 반응형 형식 유효성 검사를 설정하는 방법을 살펴보겠습니다.

    이는 영화에 대한 매우 표준적인 예약 양식의 빠른 데모입니다. 하나 이상의 양식 입력이 불완전한 경우 어떤 일이 발생하는지 보여주고 특정 오류 메시지가 어떻게 시각화되는지 확인할 수 있습니다.

    Angular 반응형 폼 검증의 예시를 위해 필요한 필드는 다음과 같습니다. 영화, 전체 이름, 이메일, 장르. 이 모든 것을 완료하지 않으면 예약을 진행할 수 없고 book button 비활성화 상태로 유지됩니다.

    따라서 영화 제목, 이름, 전화번호, 이메일에 대한 값을 입력하면 녹색으로 강조 표시됩니다. 그러나 favorite genre 선택하는 것을 잊은 경우 이 필드는 빨간색으로 강조 표시되어 불완전한 값 입력을 나타냅니다. 값이 모두 올바르게 설정되면 필드가 녹색으로 강조 표시되어 올바른 값 입력을 나타냅니다. book button 활성화되고 이후에 양식을 성공적으로 제출할 수 있습니다.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Angular form group validation

    폼 그룹은 기본적으로 캡슐화된 컨트롤의 상태에 액세스할 수 있도록 하는 여러 개의 관련 FormControlls의 그룹입니다. Angular from group validation은 그룹 컨트롤이나 폼의 값을 추적하고 폼 컨트롤의 상태 유효성 검사를 추적하는 데 도움이 됩니다. FormGroup​ ​FormControl과 함께 사용됩니다.

    Why would you need Angular form custom validation?

    사용자 정의 유효성 검사기를 사용하면 다양한 기능을 처리하고 양식의 값이 특정 기준을 충족하는지 확인할 수 있습니다. 이는 기본 제공 유효성 검사기만 사용할 때는 불가능한 경우도 있습니다. 전화번호나 특정 비밀번호 패턴의 유효성을 검사하려면 사용자 정의 유효성 검사기를 만들고 Angular 형식 사용자 정의 유효성 검사를 사용하는 것이 가장 좋습니다.

    반응형 폼을 사용하면 이러한 폼을 생성하는 것은 새 함수를 작성하는 것만큼 쉽습니다. 그리고 모델 기반 폼(Angular의 반응형 폼)의 경우 사용자 지정 검증 함수를 생성하여 FormControl 생성자로 보냅니다.

    아래에서는 반응형 양식에서 사용자 정의 양식 유효성 검사기를 작성하고 구현하는 방법을 볼 수 있습니다.

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

@Component({/* ... */})
export class MyComponent implements OnInit {
    public form: FormGroup;

    public ngOnInit(): void {
        this.form = new FormGroup({
            datePicker: new FormControl('', [Validators.required, this.dateValidator(new Date())])
        });
    }

    private dateValidator(val: Date): ValidatorFn {
        return (control: AbstractControl): ValidationErrors | null => {
            if (this.isDate(control.value)
                || this.valGreaterThanDate(control.value, val)) {
                return { value: true };
            }

            return null;
        }
    }

    private valGreaterThanDate(value: Date, date: Date): boolean {
        const value1 = new Date(value).setHours(0, 0, 0, 0);
        const value2 = new Date(date).setHours(0, 0, 0, 0);
        return value.getTime() > date.getTime();
    }

    private isDate(value: unknown): value is Date {
        return value instanceof Date
            && !isNaN(value.getTime());
    }
}
typescript

    Additional Resources

    관련 주제:

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.