요구사항: 일상적인 프론트엔드 개발에서는 폼을 통해 데이터를 추가하고 편집하는 데 자주 사용됩니다. FormGroup 인스턴스는 FormControl 인스턴스 집합을 추적할 수 있으며, FormGroup이 생성되면 각 컨트롤을 이름으로 추적할 수 있습니다. 폼 컨트롤을 어떻게 맞춤화하나요?
먼저 렌더링을 살펴보겠습니다:
단계는 다음과 같습니다:
- ControlValueAccessor 인터페이스를 계승합니다
- NG_VALUE_ACCESSOR 제공업체에 등록하세요
ControlValueAccessor 인터페이스를 계승합니다
ControlValueAccessor 인터페이스는 다음과 같이 4가지 메서드를 정의합니다:
- writeValue: FormControl API를 명시적으로 호출하는 모든 값 동작은 커스텀 폼 컨트롤의 writeValue() 메서드를 호출하여 새 값을 매개변수로 전달합니다. 이 기능은 네이티브 폼 컨트롤의 값을 설정하는 것입니다. 데이터 흐름은 Angular 폼 -> 네이티브 폼(커스텀 컨트롤)에서 왔습니다.
- registerOnChange: 초기화 시 호출되는 onChange 이벤트를 등록하며, 이는 이벤트 트리거 함수입니다. 이 이벤트 트리거 함수의 용도는 무엇인가요? 먼저 registerOnChange에 이벤트 트리거 함수를 저장하고, 적절한 때(예: 컨트롤이 사용자 입력을 받고 응답해야 할 때)에 호출해야 합니다. 이 기능은 "컨트롤 내 폼 데이터에 변화가 있을 때 호출자가 컨트롤에 알림을 보내는 API", 즉 컨트롤 내 정보를 동기화하는 API로 이해할 수 있습니다. 이 이벤트 함수의 매개변수는 Angular 형식이 받아야 할 값입니다. 네이티브 폼(커스텀 컨트롤)에서 > Angular 폼까지의 데이터 흐름.
- registerOnTouched: 사용자가 컨트롤과 상호작용할 때 트리거되는 콜백 함수인 onTouched 이벤트를 등록합니다. 이 함수는 폼 컨트롤에 이미 터치되었음을 알리고, FormContorl의 내부 상태를 업데이트하는 데 사용됩니다. 네이티브 폼(커스텀 컨트롤)에서 > Angular 폼까지의 데이터 흐름.
- setDisabledState: 폼 상태가 DISABLED로 또는 DISABLED로 바뀌면, 폼 API는 setDisabledState() 메서드를 호출하여 해당 DOM 요소를 활성화하거나 비활성화합니다. 데이터 흐름은 Angular 폼 -> 네이티브 폼(커스텀 컨트롤)에서 왔습니다.
상호작용은 아래와 같습니다:
실제로 네이티브 폼 컨트롤은 ControlValueAccessor와 유사한 인터페이스를 가지고 있습니다. 예를 들어, Angular가 컴포넌트 템플릿에서 입력 또는 텍스트 영역 DOM 네이티브 컨트롤을 만날 때 DefaultValueAccessor 명령어를 사용합니다.
접근자 | 폼 요소 | DefaultValueAccessor | 입력, 텍스트 영역 | 체크박스: ControlValueAccessor | input[type=checkbox] | NumberValueAccessor | 입력[type=number] | 라디오 컨트롤 값 액세스서 | 입력[유형=라디오] | 범위값 액세스서 | input[type=range] | SelectControlValueAccessor | 고르다 | SelectMultipleControlValueAccessor | select[여러 명] |
위 내용은 Angular가 모든 네이티브 DOM 폼 요소, 즉 내장된 ControlValueAccessor에 대해 만든 Angular 폼 컨트롤입니다.
문서조사:하이퍼링크 로그인이 보입니다.
NG_VALUE_ACCESSOR 제공업체에 등록하세요
ControlValueAccessor 인터페이스를 구현한 후에는 NG_VALUE_ACCESSOR으로도 등록해야 하며, 이를 통해 Angular가 커스텀 폼 컨트롤을 인식하고 통합할 수 있습니다. 그렇지 않으면 "RuntimeError: NG01203: 폼 컨트롤 이름: 'xxx'에 대한 값 accessor 없음"이라는 오류가 발생합니다.
문서조사:하이퍼링크 로그인이 보입니다.
인코딩하
단계에 따르면, 완전한 코딩 작업, 즉 초기 렌더링 효과와 코드는 다음과 같습니다.
HTML 페이지:
TS 코드:
참조:
하이퍼링크 로그인이 보입니다.
하이퍼링크 로그인이 보입니다. |
2025-4-30 16:00:55에 게시됨
|
|
|
|
