Angular 반응형 유효성 검사
What are reactive forms in Angular?
Angular의 반응형 양식은 기본 양식 객체 모델에 대한 직접 액세스를 제공하여 양식 입력 처리에 대한 불변적이고 명시적인 접근 방식을 제공합니다. 이러한 입력 값이 시간에 따라 변경됨에 따라 양식의 상태는 고정되거나 유연하지 않은 방법을 사용하는 반응형 양식에 의해 관리됩니다.
즉, 데이터 모델에 변경 사항이 발생할 때마다 소위 관찰 가능한 연산자가 기존 데이터 모델을 계속해서 업데이트하는 대신 새로운 데이터 모델을 반환한다는 의미입니다. 그리고 이는 양식의 상태를 깨끗하게 유지합니다.
Angular 반응형 형식은 다음과 같은 이유로 확장성이 뛰어나고 재사용이 가능하며 견고한 것으로 간주됩니다.
불변성
Angular의 반응형 형식은 불변 또는 고정 데이터 구조를 제공합니다. 기본 모델의 상태가 변경되면 업데이트된 이 특정 모델의 새로운 "버전"을 얻게 됩니다. 새로운 값이 있지만 언제든지 모든 (UI) 컨트롤과 정렬된 상태를 유지합니다.
더 나은 테스트 용이성
반응형 양식을 사용하면 테스트가 매우 간단하며 설정이 덜 필요합니다. 대규모 애플리케이션의 경우 이는 매우 유용합니다. 여기서는 입력 스트림에 대한 동기식 액세스를 얻을 수 있으며 UI를 렌더링하지 않고도 양식과 데이터 모델을 테스트할 수 있습니다.
예측 가능성
반응형 양식은 양식의 모든 고유한 변경 사항을 추적하고 입력 값에 동기식으로 액세스할 수 있는 관찰 가능한 스트림을 중심으로 구축됩니다(잘 구조화된 데이터 흐름 덕분에). 결과적으로 반응성 형태를 매우 예측 가능하게 만듭니다.
일관되고 구조화된 데이터 흐름
Angular 반응형 양식의 데이터 흐름은 양식 논리가 구성 요소 클래스에 의해 주도되기 때문에 잘 구조화되어 있습니다. 이를 통해 구성 요소 클래스의 FormControl 인스턴스에 유효성 검사기 기능을 직접 추가할 수 있습니다. 변경이 발생할 때마다 Angular 이러한 함수를 호출합니다.
What is angular form validation?
Angular form 유효성 검사는 사용자가 웹 양식에 제공한 입력이 정확하고 완전한지 확인하는 통합 기술 프로세스입니다. 템플릿 기반 접근 방식이나 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());
}
}
또한 유효성 검사기는 비동기식일 수 있습니다.
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());
}
}
Angular Reactive form validation example
이 Angular 형식 유효성 검사 예제를 통해 실제로 반응형 형식 유효성 검사를 설정하는 방법을 살펴보겠습니다.
이는 영화에 대한 매우 표준적인 예약 양식의 빠른 데모입니다. 하나 이상의 양식 입력이 불완전한 경우 어떤 일이 발생하는지 보여주고 특정 오류 메시지가 어떻게 시각화되는지 확인할 수 있습니다.
Angular 반응형 양식 유효성 검사의 예를 위해 필요한 필드에는 영화, 이름, 이메일 및 장르가 포함됩니다. 모든 절차를 완료하지 않으면 예약을 진행할 수 없으며 book button 비활성화된 상태로 유지됩니다.
따라서 영화 제목, 이름, 전화번호, 이메일에 대한 값을 입력하면 녹색으로 강조 표시됩니다. 그러나 favorite genre 선택하는 것을 잊은 경우 이 필드는 빨간색으로 강조 표시되어 불완전한 값 입력을 나타냅니다. 값이 모두 올바르게 설정되면 필드가 녹색으로 강조 표시되어 올바른 값 입력을 나타냅니다. book button 활성화되고 이후에 양식을 성공적으로 제출할 수 있습니다.
Angular form group validation
양식 그룹은 기본적으로 캡슐화된 컨트롤의 상태에 액세스할 수 있게 해주는 여러 관련 FormControlls의 그룹입니다. 그룹 유효성 검사의 Angular 그룹 컨트롤 또는 양식의 값을 추적하고 양식 컨트롤 상태의 유효성 검사를 추적하는 데 도움이 됩니다. 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());
}
}
Additional Resources
관련 주제:
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub