비동기 유효성 검사기
서버를 대상으로 비동기 방식으로 유효성을 검사합니다.
비동기 유효성 검사기은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
기다리는 유효성 검사
사용자 이름이 이미 사용 중인지 확인하는 것처럼 서버가 필요한 유효성 검사가 있습니다. 비동기 유효성 검사기는 오류 맵 또는 null로 확인되는 Promise나 Observable을 반환합니다.
AsyncValidatorFn 타입
비동기 유효성 검사기는 컨트롤을 받아 Observable<ValidationErrors | null> 또는 Promise를 반환합니다.
const v: AsyncValidatorFn = (control) => {
return checkAvailable(control.value);
};null을 반환하면 유효함
값이 유효하면 null로 확인하고, 유효하지 않으면 { taken: true }와 같은 오류 객체로 확인합니다. 동기 유효성 검사기와 동일합니다.
사용자 이름 유효성 검사기
이 유효성 검사기는 서비스를 호출하고 결과를 매핑합니다.
usernameValidator(api: UserApi): AsyncValidatorFn {
return (control) =>
api.isTaken(control.value).pipe(
map(taken => taken ? { taken: true } : null)
);
}등록하기
비동기 유효성 검사기는 동기 유효성 검사기와 분리하여 컨트롤의 세 번째 인수에 넣습니다.
new FormControl('', {
validators: [Validators.required],
asyncValidators: [usernameValidator(api)]
});PENDING 상태
비동기 유효성 검사기가 실행되는 동안 컨트롤의 상태는 PENDING입니다. 이를 사용하여 로딩 표시기를 보여 주세요.
@if (form.controls.username.pending) {
<span>Checking...</span>
}요청 디바운싱
비동기 유효성 검사기는 값이 변경될 때마다 실행됩니다. 서버에 요청을 과도하게 보내지 않도록 디바운싱하세요.
return timer(300).pipe(
switchMap(() => api.isTaken(control.value)),
map(taken => taken ? { taken: true } : null)
);switchMap으로 오래된 호출 취소하기
switchMap을 사용하면 값이 다시 변경될 때 이전에 진행 중인 요청이 취소되므로 최신 결과만 중요하게 처리됩니다.
updateOn 전략
사용자가 필드를 벗어날 때만 비동기 유효성 검사가 실행되어 요청을 줄이도록 updateOn: 'blur'를 설정하세요.
new FormControl('', {
asyncValidators: [usernameValidator(api)],
updateOn: 'blur'
});오류 읽기
유효성 검사가 완료되고 컨트롤이 수정되었거나 포커스를 받았으면 오류를 표시하세요.
@if (form.controls.username.hasError('taken')) {
<span>Username already taken</span>
}권장 사항
항상 디바운싱하고, 오래된 요청을 취소하며, 대기 중 표시기를 보여 주세요. 또한 네트워크 오류를 처리하여 폼이 PENDING 상태에 멈추지 않도록 하세요.
빠른 확인
비동기 유효성 검사기에 대한 이해도를 확인해 보세요.
복습
AsyncValidatorFn이 ValidationErrors | null의 Observable 또는 Promise를 반환하고, 컨트롤의 세 번째 인수에 등록되어 컨트롤을 PENDING 상태로 만든다는 것을 배웠습니다. 서버 호출을 관리하려면 디바운싱하고 switchMap을 사용하세요.
자주 묻는 질문
“비동기 유효성 검사기” 강의는 무료인가요?
네 — “비동기 유효성 검사기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Angular Academy 강의 전체를 잠금 해제할 수 있습니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“비동기 유효성 검사기”에서 뭘 배우나요?
서버를 대상으로 비동기 방식으로 유효성을 검사합니다. 브라우저에서 직접 실행하는 실습 코드로 Angular Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Angular Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Angular Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“비동기 유효성 검사기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Angular Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Angular Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 타입이 지정된 반응형 폼
- FormArray와 동적 필드
- 비동기 유효성 검사기
- FormBuilder 패턴