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

您不能使用Angular Reactive Form进行绑定，因为这是一个html按钮，并且Reactive Forms（通过FormControlDirective指令）或Template-driven Forms（通过ngModel指令）都无法工作。这两个指令均旨在与html输入元素一起使用。

如果它们都是类型为button的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>

如何使用Angular Reactive表单绑定/更改下面的HTML按钮下拉列表

1 个答案: