Angular Select не открывается, пока не будет нажат другой элемент - PullRequest
Новая
       5

Angular Select не открывается, пока не будет нажат другой элемент

0 голосов
/ 05 ноября 2019

Я использую Angular 6 с компонентами Material. После изменения моего кода (я не уверен, когда это начало происходить), мои элементы выбора действуют очень странно.

Видео странного поведения

Как вы можете видеть, selectЯщики для адресов не открываются, пока я не нажму на mat-autocomplete вверху. Я также мог бы щелкнуть другой элемент, который также вызовет открытие выбора.

Что может быть причиной этого? Я действительно понятия не имею. 

      <mat-form-field class="full-width">
        <!--                <input matInput placeholder="{{ 'mainapp.shipment.pickupaddress' | translate }}"
                               attr.aria-label="{{ 'mainapp.shipment.pickupaddress' | translate }}" [matAutocomplete]="auto_p"
                               formControlName="address_from"
                        >
                        <mat-autocomplete #auto_p="matAutocomplete" autoActiveFirstOption [displayWith]="displayAddress">
                          <mat-option *ngFor="let pickup of filteredAddresses_pickup | async" [value]="pickup">
                            <span>{{pickup.name}}, {{pickup.postalcode}}, {{pickup.country}}</span>
                          </mat-option>
                        </mat-autocomplete>-->
        <mat-label>{{ 'mainapp.shipment.pickupaddress' | translate }}</mat-label>
        <mat-select formControlName="address_from">
          <!--<mat-option *ngFor="let food of foods" [value]="food.value">
            {{food.viewValue}}
          </mat-option>-->
          <mat-option value="no_change" *ngIf="shipment_id">{{ 'mainapp.shipment.address_selector.no_change' | translate }}</mat-option>
          <mat-option value="update" *ngIf="shipment_id" (click)="openAddAddressDialog('from', fromAddress)">{{ 'mainapp.shipment.address_selector.update' | translate }}</mat-option>
          <mat-option value="new" (click)="openAddAddressDialog('from')">{{ 'mainapp.shipment.address_selector.new' | translate }}</mat-option>
          <mat-option value="new_entered" [ngClass]="addressFromSelected ? 'none': 'hide_element'">{{addressFromSelectedLabel}}</mat-option>
          <mat-option value="visiting_address">{{ 'mainapp.shipment.address_selector.visiting_address' | translate }}</mat-option>
          <mat-optgroup label="Recent addresses">
            <mat-option *ngFor="let address of _addresses | async" [value]="address">
              {{ displayAddress(address) }}
            </mat-option>
          </mat-optgroup>
        </mat-select>
      </mat-form-field>

1 Ответ

0 голосов
/ 05 ноября 2019

Нельзя использовать один и тот же formControlName для нескольких элементов. Смотрите комментарии! Я удалил много кода для видимости. 

<mat-form-field class="full-width">
   <input matInput placeholder="{{ 'mainapp.shipment.pickupaddress' | translate }}"
   attr.aria-label="{{ 'mainapp.shipment.pickupaddress' | translate }}" [matAutocomplete]="auto_p"
   formControlName="address_from" />// This is address_from
   <mat-label>{{ 'mainapp.shipment.pickupaddress' | translate }}</mat-label>
   <mat-select formControlName="address_from">
      // and this address_from needs to be something different
      <mat-option value="visiting_address">{{ 'mainapp.shipment.address_selector.visiting_address' | translate }}</mat-option>
      <mat-optgroup label="Recent addresses">
         <mat-option *ngFor="let address of _addresses | async" [value]="address">
         {{ displayAddress(address) }}
         </mat-option>
      </mat-optgroup>
   </mat-select>
</mat-form-field>
...