Вимоги: У щоденній фронтенд-розробці форми часто використовуються для додавання та редагування даних через форми. Екземпляр FormGroup може відстежувати набір екземплярів FormControl, і коли створюється FormGroup, кожен контроль у ньому можна відстежувати за його назвою. Як налаштувати керування формою?
Давайте спочатку розглянемо рендери:
Кроки такі:
- Успадковує інтерфейс ControlValueAccessor
- Зареєструйтеся у постачальника NG_VALUE_ACCESSOR
Успадковує інтерфейс ControlValueAccessor
Інтерфейс ControlValueAccessor визначає 4 методи, а саме:
- writeValue: Будь-яка дія значення, яка явно викликає API FormControl, викликає метод writeValue() користувацького контролю форми і передає нове значення як параметр. Він встановлює значення нативного контролю форми. Потік даних походить з Angular form -> Native (власне керування).
- registerOnChange: реєструє подію onChange, яка викликається при ініціалізації і є функцією тригера події. Яка користь від цієї функції тригера події? Спочатку потрібно зберегти функцію тригера події в registerOnChange і викликати її, коли настане правильний час (наприклад, коли керування отримує введення користувача і потребує відповіді). Цю функцію можна зрозуміти як «API, який використовує викликач для сповіщення керування про зміну даних форми в контролі», тобто для синхронізації інформації в керу. Параметр цієї подійної функції — це значення, яке має отримати форма Angular. Поток даних із рідної форми (власний контроль) -> кутової форми.
- registerOnTouched: реєструє подію onTouched, яка є функцією зворотного виклику, що активується при взаємодії користувача з керуванням. Ця функція використовується для повідомлення контролю форми, що вона вже торкнулася для оновлення внутрішнього стану зв'язаного FormContorl. Поток даних із рідної форми (власний контроль) -> кутової форми.
- setDisabledState: Коли стан форми змінюється на або змінюється з DISABLED, API форми викликає метод setDisabledState(), щоб увімкнути або вимкнути відповідний елемент DOM. Потік даних походить з Angular form -> Native (власне керування).
Взаємодія показана нижче:
Насправді, нативні елементи керування формами також мають інтерфейси, схожі на ControlValueAccessor, наприклад, коли Angular зустрічає вхідні або текстові DOM нативні елементи в шаблонах компонентів, він використовує команду DefaultValueAccessor.
Аксесуар | Елемент форми | DefaultValueAccessor | вхід, текстова область | CheckboxControlValueAccessor | input[type=checkbox] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | вхід[type=радіо] | RangeValueAccessor | input[type=дальність] | SelectControlValueAccessor | Виберіть | SelectMultipleControlValueAccessor | Оберіть[множинно] |
Вищенаведене — це Angular Form Control Control, який Angular створив для всіх рідних елементів DOM-форми, а саме вбудований ControlValueAccessor.
Документації:Вхід за гіперпосиланням видно.
Зареєструйтеся у постачальника NG_VALUE_ACCESSOR
Після впровадження інтерфейсу ControlValueAccessor нам також потрібно зареєструвати його як NG_VALUE_ACCESSOR, щоб Angular міг розпізнати та інтегрувати власний контроль форми, інакше з'явиться помилка "RuntimeError: NG01203: Немає доступу до значення для імені контролю форми: 'xxx'".
Документації:Вхід за гіперпосиланням видно.
кодувати
Згідно з кроками, повна робота з кодуванням, ефект — це початкове рендеринг, код виглядає так.
HTML-сторінка:
Код TS:
Посилання:
Вхід за гіперпосиланням видно.
Вхід за гіперпосиланням видно. |
Опубліковано 2025-4-30 16:00:55
|
|
|
|
