Требования: В ежедневной фронтенд-разработке формы часто используются для добавления и редактирования данных через формы. Экземпляр FormGroup может отслеживать набор экземпляров FormControl, и при создании FormGroup каждый элемент управления в нём может отслеживаться по имени. Как настроить управление формой?
Давайте сначала посмотрим на рендеры:
Шаги следующие:
- Наследует интерфейс ControlValueAccessor
- Зарегистрируйтесь у поставщика NG_VALUE_ACCESSOR
Наследует интерфейс ControlValueAccessor
Интерфейс ControlValueAccessor определяет следующие 4 метода:
- writeValue: Любое действие значения, явно вызывающее API FormControl, вызовет метод writeValue() пользовательского контроллера формы и передаст новое значение в качестве параметра. Он задаёт значение нативного контроля формы. Поток данных ведётся от угловой формы -> нативной формы (пользовательское управление).
- registerOnChange: регистрирует событие onChange, которое вызывается при инициализации и является функцией триггера события. В чём смысл этой функции триггера событий? Сначала нужно сохранить функцию триггера события в registerOnChange и вызвать её, когда придёт подходящее время (например, когда управление получает пользовательский ввод и требует ответа). Эту функцию можно понять как «API, используемый вызывающим для уведомления управления о смене данных формы в контроле», то есть для синхронизации информации в управлении. Параметр этой функции события — это значение, которое должна получить форма Angular. Поток данных из нативной формы (пользовательское управление) -> угловой формы.
- registerOnTouched: регистрирует событие onTouched — функцию обратного вызова, которая запускается при взаимодействии пользователя с управлением. Эта функция используется для уведомления контролера формы о том, что она уже затронута для обновления внутреннего состояния связанного FormContorl. Поток данных из нативной формы (пользовательское управление) -> угловой формы.
- setDisabledState: Когда состояние формы меняется на или с DISABLED, API формы вызывает метод setDisabledState() для включения или отключения соответствующего элемента DOM. Поток данных ведётся от угловой формы -> нативной формы (пользовательское управление).
Взаимодействие показано ниже:
На самом деле, нативные элементы управления формой также имеют интерфейсы, похожие на ControlValueAccessor, например, когда Angular сталкивается с входными или текстовыми элементами управления DOM в шаблонах компонентов, он использует команду DefaultValueAccessor.
Доступа | Элемент формы | DefaultValueAccessor | Ввод, текстовая область | CheckboxControlValueAccessor | input[type=чекбокс] | NumberValueAccessor | input[type=number] | RadioControlValueAccessor | input[type=радио] | RangeValueAccessor | input[type=дальность] | SelectControlValueAccessor | выбирать | SelectMultipleControlValueAccessor | Select[множество] |
Вышеописанное — это элемент Angular Form Control, который Angular создал для всех родных элементов формы DOM, а именно встроенный ControlValueAccessor.
Документация:Вход по гиперссылке виден.
Зарегистрируйтесь у поставщика NG_VALUE_ACCESSOR
После реализации интерфейса ControlValueAccessor нам также необходимо зарегистрировать его как NG_VALUE_ACCESSOR, чтобы пользовательский контроль формы мог быть распознан и интегрирован Angular, иначе появится ошибка «RuntimeError: NG01203: Нет доступа к значениям для имени контроля формы: 'xxx'».
Документация:Вход по гиперссылке виден.
кодировать
Согласно шагам, полный процесс кодирования, эффект — это начальное рендеринг, код выглядит следующим образом.
HTML-страница:
Код TS:
Ссылка:
Вход по гиперссылке виден.
Вход по гиперссылке виден. |
Опубликовано 2025-4-30 16:00:55
|
|
|
|
