Как привязать / изменить приведенные ниже HTML-кнопки в выпадающих списках, используя формы Angular Reactive

Question

        <div class="c-field">
          <label [attr.for]="dropdownId"
              class="c-field__label">{{label}}</label>
             <div class="c-dropdown" [attr.id]="dropdownId"
                aria-labelledby="dropdown-demo-no-error-dropdown-label"
               aria-describedby="dropdown-demo-no-error-field-helper">
           <button class="c-btn c-dropdown__toggle c-btn--dropdown"
                type="button" [(ngModel)]="selectedValue"
                data-toggle="dropdown" (click)="onDropdownValueChange($event)"
                aria-haspopup="true"
                aria-expanded="false"
                aria-describedby="dropdown-demo-no-error-button"
                [attr.id]="dropdownId">
          <span class="c-dropdown__text">Dropdown</span>
        </button>
             <div class="c-dropdown__menu dropdown-menu"
             aria-labelledby="dropdown-demo-no-error"
             x-placement="bottom-start"
             style="position: absolute; will-change: transform; top: 0px; left: 
         0px; transform: translate3d(0px, 40px, 0px);">
          <hr>
          <button class="c-dropdown__item " *ngFor="let item of dataSource"
                  type="button"
                  [attr.id]="dropdownId + item.id">{{item.text}}</button>      
        </div>
        <div *ngIf="isFormSubmitted && dropdownFormControl.errors">      
          <span class="c-field__error" id="dropdown-demo-error-field-error">
          {{ label }} {{ errorMessages.RequiredField }}</span>
        </div>
        <span class="c-field__helper" *ngIf="helperText"
              id="dropdown-demo-no-error-field-helper">{{helperText}}</span>
      </div>
         </div>

Здесь приведенный выше HTML для выпадающего связывания.но когда я нажимаю на кнопку, событие раскрывающегося события не запускается.Не могли бы вы предложить мне, как изменить событие будет работать?

Answer 1

Невозможно выполнить привязку, используя угловую реактивную форму, так как это кнопка html, и обе реактивные формы (через директиву FormControlDirective) или формы, управляемые шаблоном (через директиву ngModel) не будут работать.Обе эти директивы предназначены для работы с элементами ввода html.

Не думаю, что было бы много смысла, если бы они были элементами ввода html типа button.Поскольку в этом случае атрибут value будет определять текст на кнопке и не будет изменяться при взаимодействии с пользователем.

Я думаю, что вам лучше всего выполнить обновление значения selectedValue с помощью событий щелчка на 'сам выпадающий список:

 <div class="c-dropdown__menu dropdown-menu"
             aria-labelledby="dropdown-demo-no-error"
             x-placement="bottom-start"
             style="position: absolute; will-change: transform; top: 0px; left: 
         0px; transform: translate3d(0px, 40px, 0px);">
          <hr>
          <button class="c-dropdown__item " *ngFor="let item of dataSource"
                  type="button"
                  [attr.id]="dropdownId + item.id" (click)="onDropdownValueChange(item)">{{item.text}}</button>      
        </div>