Изисквания: В ежедневната front-end разработка формулярите често се използват за добавяне и редактиране на данни чрез формуляри. Екземпляр на FormGroup може да проследява набор от FormControl инстанции, а когато се създаде FormGroup, всеки контрол в него може да бъде проследен по името си. Как да персонализирам контрол на формата?
Нека първо разгледаме визуализациите:
Стъпките са следните:
- Наследява интерфейса ControlValueAccessor
- Регистрирайте се при доставчик на NG_VALUE_ACCESSOR
Наследява интерфейса ControlValueAccessor
Интерфейсът ControlValueAccessor дефинира 4 метода, както следва:
- writeValue: Всяко действие със стойност, което изрично извиква FormControl API, ще извика метода writeValue() на контрола на персонализираната форма и ще предаде новата стойност като параметър. Това, което прави, е да задава стойността на нативния контрол на формата. Потокът от данни е от ъглова форма -> Родна форма (персонализиран контрол).
- registerOnChange: регистрира събитието onChange, което се извиква при инициализация и е функция за задействане на събитие. Каква е ползата от тази функция за задействане на събития? Първо трябва да запазим функцията за тригер на събитието в registerOnChange и да я извикаме, когато моментът дойде (например, когато контролът получи потребителски вход и трябва да отговори). Можете да разберете тази функция като "API, използван от извикаващия се за уведомяване на контрола при промяна в данните на формата в контрола", тоест за синхронизиране на информацията в контрола. Параметърът на тази функция на събитията е стойността, която ъгловата форма трябва да получи. Поток от данни от родна форма (персонализиран контрол) -> ъглова форма.
- 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 контролът, който Angular създаде за всички нативни DOM елементи на формата, а именно вградения ControlValueAccessor.
Документация:Входът към хиперлинк е видим.
Регистрирайте се при доставчик на NG_VALUE_ACCESSOR
След като реализираме интерфейса ControlValueAccessor, трябва да го регистрираме и като NG_VALUE_ACCESSOR, така че персонализираният контрол на формата да бъде разпознат и интегриран от Angular, в противен случай ще се появи грешка "RuntimeError: NG01203: Няма достъп до стойности за името на контрола на форма: 'xxx'".
Документация:Входът към хиперлинк е видим.
кодирам
Според стъпките, пълната работа по кодиране, ефектът е първоначалното рендериране, кодът е следният.
HTML страница:
TS код:
Препратка:
Входът към хиперлинк е видим.
Входът към хиперлинк е видим. |
Публикувано на 2025-4-30 16:00:55
|
|
|
|
