如何使用 Angular Reactive 表单绑定/更改以下 HTML 按钮下拉列表答案

【问题标题】：How to Bind/change the below HTML button drop down lists using Angular Reactive forms如何使用 Angular Reactive 表单绑定/更改以下 HTML 按钮下拉列表
【发布时间】：2019-02-28 14:09:53
【问题描述】：

        <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 用于下拉绑定。但当我单击按钮单击事件下拉事件未触发。您能否建议我如何更改活动？

【问题讨论】：

您的示例使用模板驱动的表单而不是反应式表单。您的意思是要将其转换为 Reactive Forms 还是只是想知道为什么代码不能按原样工作？

标签： html angular angular-reactive-forms reactive-forms

【解决方案1】：

您不能使用 Angular 反应式表单进行绑定，因为这是一个 html 按钮，反应式表单（通过 FormControlDirective 指令）或模板驱动表单（通过 ngModel 指令）都不起作用。这两个指令都设计用于处理 html 输入元素。

我认为如果它们是按钮类型的 html 输入元素也没有多大意义。因为在这种情况下 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>

【讨论】：