Angular Academy · 강의

비활성 및 터치 상태 처리

컨트롤에 폼 상태를 반영합니다.

비활성 및 터치 상태 처리은(는) CoddyKit의 무료 Angular Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Angular Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Angular Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

값 그 이상

완전한 사용자 지정 컨트롤은 폼의 두 가지 개념을 더 처리해야 합니다. 바로 disabled 상태와 touched 상태입니다. 이러한 상태가 UX와 유효성 검사 표시를 제어합니다.

setDisabledState

폼 컨트롤이 비활성화되거나 활성화될 때 Angular가 setDisabledState를 호출합니다(예: control.disable()을 사용하는 경우). 컴포넌트에 이 상태를 반영합니다.

disabled = false;

setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

뷰에 비활성화 상태 반영

disabled 플래그를 사용해 컨트롤의 스타일을 지정하고 상호작용을 차단하여, 사용자가 비활성화된 필드를 변경할 수 없게 합니다.

template: '<button [disabled]="disabled" (click)="select(s)">star</button>'

핸들러 보호하기

비활성화된 동안에는 프로그래밍 방식의 상호작용이나 키보드 상호작용이 아무 작업도 하지 않도록 변경 핸들러도 보호합니다.

select(rating: number): void {
  if (this.disabled) return;
  this.value = rating;
  this.onChange(rating);
}

registerOnTouched

Angular는 컨트롤을 터치됨으로 표시하는 콜백을 전달합니다. onChange를 저장했던 것처럼 이 콜백도 저장합니다.

private onTouched: () => void = () => {};

registerOnTouched(fn: () => void): void {
  this.onTouched = fn;
}

onTouched 호출하기

사용자가 컨트롤을 벗어날 때, 일반적으로 포커스가 해제될 때 터치됨 콜백을 호출합니다. 이렇게 하면 Angular에 사용자가 상호작용했음을 알리고, 터치됨을 기준으로 한 유효성 검사 메시지를 활성화할 수 있습니다.

onBlur(): void {
  this.onTouched();
}

터치됨 상태가 중요한 이유

유효성 검사 UX는 필드가 터치된 후에만 오류를 표시하는 경우가 많습니다. onTouched를 호출하지 않으면 control.touched가 false로 유지되어 오류 메시지가 적절한 시점에 표시되지 않을 수 있습니다.

<small *ngIf="control.touched && control.invalid">Required</small>

포커스 해제 연결하기

컨트롤을 벗어날 때 터치됨으로 표시되도록 템플릿에 포커스 해제 핸들러를 연결합니다.

template: '<div (blur)="onBlur()" tabindex="0">...</div>'

반응형 비활성화 패턴

템플릿의 disabled 바인딩 대신 폼 API(control.disable())를 통해 비활성화하는 방식을 사용합니다. 그러면 Angular가 일관되게 setDisabledState를 제어할 수 있습니다.

this.form.get('stars')?.disable();

접근성

비활성화 및 포커스 상태를 접근 가능하게 반영합니다. aria-disabled를 설정하고 tabindex를 관리하며, 키보드 사용자가 포커스를 해제해 터치됨 상태를 발생시킬 수 있도록 하여 모든 사용자가 컨트롤을 이용할 수 있게 합니다.

이제 완전히 통합되었습니다

값, 비활성화, 터치됨 상태를 모두 처리했으므로 이제 컨트롤이 반응형 폼과 템플릿 기반 폼에서 네이티브 input처럼 동작합니다. 이제 마지막으로 유효성 검사를 추가하면 됩니다.

빠른 확인

비활성화 및 터치됨 상태에 대한 지식을 확인해 보세요.

복습

setDisabledState를 처리하여 비활성화 상태를 반영하고 비활성화된 상태에서의 동작을 막았으며, registerOnTouched를 처리하여 포커스 해제 시 호출하고 터치됨으로 표시되게 했습니다. 폼 API를 사용해 비활성화 상태를 제어하고 컨트롤의 접근성을 유지하세요.

자주 묻는 질문

“비활성 및 터치 상태 처리” 강의는 무료인가요?

네 — “비활성 및 터치 상태 처리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Angular Academy(으)로 돌아가기