Angular Reactive Forms에 대한 사용자 지정 유효성 검사기를 만드는 방법
이 블로그 게시물에서는 Angular Reactive Forms에서 사용자 지정 유효성 검사기를 만드는 방법을 배웁니다. 반응형 양식을 처음 사용하는 경우 여기에서 첫 번째 Angular 반응형 양식을 만드는 방법을 알아보세요.
Dhananjay Kumar
7min read
이 블로그 게시물에서는 Angular Reactive Forms에서 사용자 지정 유효성 검사기를 만드는 방법을 배웁니다. 반응형 양식을 처음 사용하는 경우 여기에서 첫 번째 Angular 반응형 양식을 만드는 방법을 알아보세요.
아래 목록과 같은 로그인 양식이 있다고 가정해 보겠습니다. 현재 양식 컨트롤에는 유효성 검사가 연결되어 있지 않습니다.
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null),
password: new FormControl(null),
age: new FormControl(null)
});
}
여기서는 FormGroup을 사용하여 반응형 양식을 만듭니다. 구성 요소 템플릿에서 아래 코드 목록에 표시된 대로 loginForm을 첨부할 수 있습니다. 속성 바인딩을 사용하면 HTML 양식 요소의 formGroup 속성이 loginForm으로 설정되고 이러한 컨트롤의 formControlName 값이 FormGroup의 개별 FormControl 속성으로 설정됩니다.
<form (ngSubmit)='loginUser()' [formGroup]='loginForm' novalidate class="form">
<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
<br />
<input formControlName='password' type="password" class="form-control" placeholder="Enter Password" />
<br />
<input formControlName='age' type="number" class="form-control" placeholder="Enter Age" />
<br />
<button [disabled]='loginForm.invalid' class="btn btn-default">Login</button>
</form>
그러면 응용 프로그램에서 반응형 양식이 제공됩니다.
Using Validators
Angular 는 required, minLength, maxLength 및 pattern을 포함하여 많은 유용한 유효성 검사기를 제공합니다. 이러한 검증자는 @angular/forms 패키지와 함께 제공되는 Validators 클래스의 일부입니다.
email 컨트롤에 필요한 유효성 검사를 추가하고 암호 컨트롤에 maxLength 유효성 검사를 추가한다고 가정해 보겠습니다. 방법은 다음과 같습니다.
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required]),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),
age: new FormControl(null)
});
}
Validators로 작업하려면 component 클래스에서 가져와야 합니다.
import { FormGroup, FormControl, Validators } from '@angular/forms';
템플릿에서 유효성 검사기를 사용하여 오류 메시지를 표시하거나 숨길 수 있습니다. 기본적으로 get() 메소드를 사용하여 formControl을 읽고 hasError() 메소드를 사용하여 오류가 있는지 여부를 확인합니다. 또한 touched 속성을 사용하여 formControl이 터치되었는지 여부를 확인합니다.
<input formControlName='email' type="text" class="form-control" placeholder="Enter Email" />
<div class="alert alert-danger" *ngIf="loginForm.get('email').hasError('required') && loginForm.get('email').touched">
Email is required
</div>
사용자가 이메일을 입력하지 않으면 반응형 양식에 다음과 같은 오류가 표시됩니다.
Custom Validators
연령대를 18세에서 45세 사이로 하고 싶다고 가정해 보겠습니다. Angular는 범위 유효성 검사를 제공하지 않습니다. 따라서 이를 위해 사용자 지정 유효성 검사기를 작성해야 합니다.
Angular 에서는 사용자 정의 유효성 검사기를 만드는 것이 다른 함수를 만드는 것만큼 간단합니다. 명심해야 할 유일한 것은 AbstractControl 유형의 입력 매개 변수 하나를 사용하고 유효성 검사에 실패하면 키 값 쌍의 객체를 반환한다는 것입니다.
ageRangeValidator 라는 사용자 지정 유효성 검사기를 만들어 사용자가 주어진 범위에 있는 경우에만 나이를 입력할 수 있어야 합니다.
첫 번째 매개 변수의 유형은 FormControl, FormArray 및 FormGroup의 기본 클래스이기 때문에 AbstractControl이며, 이를 통해 사용자 정의 유효성 검사기 함수에 전달된 컨트롤의 값을 읽을 수 있습니다. 사용자 지정 유효성 검사기는 다음 중 하나를 반환합니다.
- 유효성 검사에 실패하면 키 값 쌍이 포함된 개체를 반환합니다. Key는 오류의 이름이고 값은 항상 부울 true 입니다.
- 유효성 검사에 실패하지 않으면 null을 반환합니다.
이제 아래 목록에서 ageRangeValidator 사용자 지정 유효성 검사기를 구현할 수 있습니다.
function ageRangeValidator(control: AbstractControl): { [key: string]: boolean } | null {
if (control.value !== undefined && (isNaN(control.value) || control.value < 18 || control.value > 45)) {
return { 'ageRange': true };
}
return null;
}
여기에서는 유효성 검사기의 최대 및 최소 범위를 하드 코딩하고 있습니다. 다음 섹션에서는 이러한 매개변수를 전달하는 방법을 살펴보겠습니다.
이제 아래 목록과 같이 ageRangeValidator를 연령 컨트롤과 함께 사용할 수 있습니다. 보시다시피 배열에 사용자 정의 유효성 검사기 함수의 이름을 추가해야 합니다.
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required]),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),
age: new FormControl(null, [ageRangeValidator])
});
}
템플릿에서 사용자 지정 유효성 검사기는 다른 유효성 검사기와 마찬가지로 사용할 수 있습니다. ageRange 유효성 검사를 사용하여 오류 메시지를 표시하거나 숨깁니다.
<input formControlName='age' type="number" class="form-control" placeholder="Enter Age" />
<div class="alert alert-danger" *ngIf="loginForm.get('age').dirty && loginForm.get('age').errors && loginForm.get('age').errors.ageRange ">
Age should be in between 18 to 45 years
</div>
사용자가 18세에서 45세 사이의 나이를 입력하지 않으면 반응형 양식에 오류가 표시됩니다.
이제 연령 제어가 사용자 지정 유효성 검사기와 함께 작동합니다. ageRangeValidator의 유일한 문제점은 18 세에서 18 사이의 숫자 만 검증하는 하드 코딩 된 연령대입니다. 고정된 범위를 피하려면 ageRangeValidator에 최대 및 최소 연령을 전달해야 합니다.
Custom Validator에 매개변수 전달하기
Angular 사용자 지정 유효성 검사기는 컨트롤의 참조 외에 추가 입력 매개 변수를 직접 사용하지 않습니다. 추가 매개변수를 전달하려면 팩토리 함수 내부에 사용자 정의 유효성 검사기를 추가해야 합니다. 그런 다음 factory 함수는 사용자 정의 유효성 검사기를 반환합니다.
JavaScript에서 함수는 다른 함수를 반환할 수 있습니다.
기본적으로 사용자 지정 유효성 검사기에 매개 변수를 전달하려면 다음 단계를 따라야 합니다.
- 팩토리 함수를 만들고 사용자 지정 유효성 검사기에 전달될 매개변수를 이 함수에 전달합니다.
- 팩토리 함수의 반환 유형은 @angular/forms의 일부인 ValidatorFn 이어야 합니다.
- factory 함수에서 사용자 지정 유효성 검사기를 반환합니다.
factory 함수 구문은 다음과 같습니다.
이제 아래 목록과 같이 입력 매개변수를 허용하도록 ageRangeValidator를 리팩토링할 수 있습니다.
function ageRangeValidator(min: number, max: number): ValidatorFn {
return (control: AbstractControl): { [key: string]: boolean } | null => {
if (control.value !== undefined && (isNaN(control.value) || control.value < min || control.value > max)) {
return { 'ageRange': true };
}
return null;
};
}
입력 매개 변수 max 및 min을 사용하여 연령 제어를 검증합니다. 이제 ageRangeValidator를 연령 제어와 함께 사용하고 아래 목록과 같이 max 및 min 값을 전달할 수 있습니다.
min = 10;
max = 20;
ngOnInit() {
this.loginForm = new FormGroup({
email: new FormControl(null, [Validators.required]),
password: new FormControl(null, [Validators.required, Validators.maxLength(8)]),
age: new FormControl(null, [ageRangeValidator(this.min, this.max)])
});
}
템플릿에서 사용자 지정 유효성 검사기는 다른 유효성 검사기와 마찬가지로 사용할 수 있습니다. ageRange 유효성 검사를 사용하여 오류 메시지를 표시하거나 숨깁니다.
<input formControlName='age' type="number" class="form-control" placeholder="Enter Age" />
<div class="alert alert-danger" *ngIf="loginForm.get('age').dirty && loginForm.get('age').errors && loginForm.get('age').errors.ageRange ">
Age should be in between {{min}} to {{max}} years
</div>
이 경우 사용자가 10세에서 20세 사이의 나이를 입력하지 않으면 아래와 같이 오류 메시지가 표시됩니다.
그리고 당신은 그것을 가지고 있습니다: Angular Reactive Forms에 대한 사용자 지정 유효성 검사기를 만드는 방법.
이 게시물이 마음에 드시나요?
이 게시물이 마음에 들면 공유해주세요. 또한 Angular 구성 요소를 확인하지 않았다면 확인하십시오!
