Angular Seleccione No abrir hasta que se haga clic en otro elemento -- angular campo con angular-material camp Relacionados El problema

Angular Select not opening until other element gets clicked


0
vote

problema

Español

Estoy usando angular 6 con componentes de material. Desde que cambiando mi código (no estoy seguro de cuándo empezaron esto), mis elementos seleccionados actúan muy raros.

Vídeo de comportamiento extraño

Como puede ver, los cuadros de selección para las direcciones no se abren hasta que hago clic en la Mat-Autocompletar en la parte superior. También podría hacer clic en otro elemento, que también hará que las selecciones se abran.

¿Qué podría estar causando esto? Realmente no tengo ni idea.

        <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>   
Original en ingles

I am using Angular 6 with Material components. Since changing my code (I am not sure when this started happening) my select elements act very weird.

Video of weird behavior

As you can see, the select boxes for the addresses do not open until I click the mat-autocomplete in the top. I could also click another element, that will also cause the selects to open.

What could be causing this? I really have no clue.

      <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> 
     
 
 

Lista de respuestas

0
 
vote

No puede usar el mismo formControlName para varios elementos. ¡Mira los comentarios! Quité un gran código para la visibilidad.

  <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>   
 

You can't use the same formControlName for multiple elements. Watch the comments! I removed a lot of code for visibility.

<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> 
 
 
   
   

Relacionados problema

2  Material angular: ¿Cómo validar el botón MD-radio en una tabla?  ( Angular material how to validate md radio button in a table ) 
¿Cómo validifica si el botón MD-RADIO no ha sido seleccionado todavía? Intenté agregar mensajes DIV y también Div-Mensaje, pero parece que no parece funcionar...

3  Angular: ¿Cómo devuelvo todos los datos para el elemento seleccionado en MAT-SELECT en MAT-Dialog, mientras que mantenga el código de mantenimiento para el valor predeterminado seleccionado  ( Angular how do i return all data for selected item in mat select on mat dialog ) 
Tengo un cuadro de diálogo MODAL PAGURACIÓN UNA MAT-SELECT. El menú desplegable se rellena con idiomas. Estoy vinculando el (valor) a la identificación del id...

1  No se pueden mostrar datos HTTP usando MattAdAdATOURCE  ( Unable to display http data using mattabledatasource ) 
Estoy tratando de usar los datos de recuperación de un servidor usando http.get. Estoy recuperando los datos, pero no puedo ponerlo en una mesa de material an...

54  ¿Cómo traducir mat-paginator en angular 4?  ( How to translate mat paginator in angular 4 ) 
¿Tiene alguna idea de cómo puedo traducir "artículos por página" en la etiqueta 998877766655 ? El mat-paginator es un elemento del diseño del material. ...

1  Cómo configurar la firma de resolución en IdialogOptions usando TypeScript en $ MDDIALOG Service of Angular Material  ( How to set resolve signature in idialogoptions using typescript in mddialog ser ) 
Actualmente el IDialogOptions RESOLVE FIRMA es resolve? : ng.IPromise<any> Cuando de acuerdo con la documentación también puede aceptar funciones que...

6  NET CORE 2 TEMPORAL DE SPA con material angular  ( Net core 2 spa template with angular material ) 
Luchando intento de obtener material angular, o cualquier conjunto de control de terceros realmente, para trabajar con esta nueva plantilla. En esta nueva pla...

2  Envolver tarjetas de material dentro de un ngfor  ( Wrap material cards inside an ngfor ) 
Estoy generando tarjetas de una API cuando el usuario realiza una búsqueda. Tengo componente de la lista de películas en la que muestro mis tarjetas Aquí ...

1  Cómo pasar observable desde la hoja de fondo angular al componente principal  ( How to pass observable from angular bottomsheet to parent component ) 
Necesito pasar datos de la hoja de fondo de material angular a su componente principal. Como tenemos [mat-dialog-close] Directiva en el componente de diál...

0  ¿Cómo cambiar el valor después del cuadro de diálogo de cierre (material angular)?  ( How to change value after closing dialog angular material ) 
Quiero cambiar el valor en mi lista después de cerrar el Success(3)5 en mi webapp. Eso significa, al principio, hace clic en una fila, entonces abre un diál...

1  Angular2 MD-Autocompletar: ¿Cómo administrar ONKEYDOWN?  ( Angular2 md autocomplete how to manage onkeydown ) 
Implementé Autocompletar de material angular2 en mi aplicación. Y ahora estoy buscando una forma de administrar la función keydown.enter correctamente. Po...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos