Как я создал повторно используемый Radio Group Input в Angular 16
Реактивный дизайн формы с Angular 16, чтобы абстрагировать ваши входные данные и сохранить ваш код СУХИМ!
Продолжая нашу дорожную карту по различным ControlValueAccessor, давайте углубимся в реализацию RadioControlValueAccessor.
Если вы не читали мою предыдущую статью, посвященную ControlValueAccessor, и множество причин, по которым стоит продолжать работу с пользовательской реализацией, прочтите вводную часть здесь:
Теперь, когда мы на одной странице, мы можем продолжить наше основное блюдо. Библиотека @angular/forms предоставляет RadioControlValueAccessor, который привязывается к HTML-элементу <input type="radio" /> всякий раз, когда применяется одна из следующих директив: ngModel | FormControl | FormControlName.
Точный список селекторов, используемых в объявлении директивы:
input[type=radio][ngModel]input[type=radio][formControlName]input[type=radio][formControl]
Поскольку нашей основной целью является создание многоразового радиоввода, RadioControlValueAccessor будет применяться автоматически при использовании комбинации, упомянутой выше, и останется доступным в фактическом компоненте, но не будет доступен из его родителя. как FormControl. Поэтому нам нужно преобразовать класс нашего компонента в ControlValueAccessor.
Что стоит упомянуть, так это <input type="radio" /> фактическое использование. Нет причин использовать только один. Обычно имеет смысл иметь пару/группу радиостанций, подключенных к одному и тому же атрибуту <form/>.
Давайте посмотрим на реальную реализацию:
Прежде всего, я повторно использую интерфейс Option, который я создал для SelectControlValueAccessor, чтобы объявить представление объекта в фактических параметрах переключателя, которые будут использоваться в моем HTML шаблон. Все, что мне нужно, это value для выбора и description | label для отображения, так как в большинстве случаев фактическое value не может быть или не может быть читаемо человеком. Поэтому необходимо отображать что-то более удобное для пользователя. Именно так мы предоставляем повторно используемый ввод без содержимого (файл option.ts).
В нашем шаблоне мы объявляем элемент <form /> HTML и предоставляем директиву FormGroup и передаем наш атрибут form из класса компонента. Затем мы используем элемент <ng-container />, чтобы обеспечить итерацию по предоставленным пользователем параметрам.
Поскольку это всего лишь пример реализации, я использовал элемент
<ng-container/>, так как не хотел создавать дополнительную обертку (в моем примере это не нужно). Однако может иметь смысл использовать нативный элемент<div />и полностью обернуть наши<input/>и<label />и придать некоторые стили, чтобы отображать их как пару. Возможно, даже предусмотрите некоторые предопределенные параметры размещения, если это необходимо. Кроме того, если требуется дополнительная настройка для каждого из входов, например, условное отключение и т. д., вам может потребоваться создать отдельный пользовательский компонент только для одного<input type=”radio” />с<label />и даже для некоторых дополнительных настроек, а затем выполнить итерацию со структурной директивой*ngForповерх это.
Кроме того, в вашем случае может потребоваться предоставить более подробную логику для создания id, так как это может привести к нежелательному поведению в будущем, когда все больше и больше радиоиспользований будет присутствовать в одном и том же HTML структуру. КСТАТИ. Мы используем атрибуты id и for, чтобы включить выбор радио, щелкнув ярлык (никакой пользовательской логики, только собственное поведение) :-)
Нам нужно передать один и тот же formControlName каждому экземпляру <input type="radio" />, так как они ссылаются на один и тот же атрибут формы (radio-group-input.component.html).
Когда мы углубимся в реальную реализацию класса, мы увидим почти ту же реализацию, что и наши предыдущие пользовательские входные данные. Единственное отличие состоит в том, что мы используем FormGroup вместо FormControl и устанавливаем @Input() options по мере необходимости. Теперь всякий раз, когда мы используем наш <app-radio-group-input /> и забываем передать options, мы получаем ошибку компиляции, как показано ниже:
Это Angular 16, одна из самых крутых функций! (строки 20–22, radio-group-input.component.ts).
Наш пользовательский компонент RadioGroupInputComponent готов к использованию либо с FormGroup, либо с FormControl. !
Это было легко, не так ли?
Нужна консультация по вашему проекту? Не испортите свое приложение и свяжитесь с нами :-)
Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.
