Desplegarse no se abrirá por segunda vez -- angular campo con primeng camp Relacionados El problema

Dropdown won't open a second time


0
vote

problema

Español

Si abro un desplegamiento de Pr PRIMENG y seleccione una opción, no se abrirá una segunda vez. No hice nada especial sobre el código: generar dinámicamente un formulario leyendo un archivo JSON, y esta es la parte con respecto a los desplegamientos:

  <p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values"></p-dropdown>   

Así es como completé mi artículo en el archivo JSON (un ejemplo):

   {   "controlName": "ClientIDCodeQualifier",   "label": "create_order_panel.client_identification",   "type": "select",   "values": [   {     "label": "None",     "value": "0"   },   {     "label": "Algorithm",     "value": "22"   },   {     "label": "Firm or Legal Entity",     "value": "23"   },   {     "label": "Natural person",     "value": "24"   }], }   

No se muestran errores en la consola cuando intento abrir nuevamente el menú desplegable después de seleccionar su valor por primera vez, aún así, no puedo abrirlo nuevamente.

actualización

Basado en las respuestas, esto es lo que estoy tratando de hacer ahora:

Este es mi HTML

  <div *ngFor="let r of mainFields" class="p-grid p-col">   <div *ngFor="let f of r" [ngClass]="getClass(f.size, f.type)">   ....   <p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values" [(ngModel)]="dummyNgModel[f.controlName]"></p-dropdown>   

Esto es lo que estoy tratando de hacer en el componente:

     ngOnInit(){    //reading the JSON file and loading all into this.mainFields    const formControls = {};    this.mainFields.forEach((row) => {             row.forEach((field) => {                 let controlOptions;                 let value = ''                 if (field.defaultValue !== undefined && field.defaultValue !== '')                     value = field.defaultValue;                 if (field.type === 'select') {                     this.dummyNgModel[field.controlName] = value;                 }                 controlOptions = new FormControl(value);                 formControls[field.controlName] = controlOptions;             });         });         this.orderForm = this.fb.group(formControls);         //...       }   

pero todavía no funciona

Original en ingles

If I open a PrimeNG dropdown and select an option, it won't open a second time. I did nothing special about the code: I dynamically generate a form reading a JSON file, and this is the part regarding dropdowns:

<p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values"></p-dropdown> 

this is how I populated my item in the JSON file (an example):

 {   "controlName": "ClientIDCodeQualifier",   "label": "create_order_panel.client_identification",   "type": "select",   "values": [   {     "label": "None",     "value": "0"   },   {     "label": "Algorithm",     "value": "22"   },   {     "label": "Firm or Legal Entity",     "value": "23"   },   {     "label": "Natural person",     "value": "24"   }], } 

No errors are shown on the console when I try to open again the dropdown after I selected its value a first time, still, I can't open it again.

UPDATE

Based on the answers, this is what I'm trying to do now:

this is my HTML

<div *ngFor="let r of mainFields" class="p-grid p-col">   <div *ngFor="let f of r" [ngClass]="getClass(f.size, f.type)">   ....   <p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values" [(ngModel)]="dummyNgModel[f.controlName]"></p-dropdown> 

This is what I'm trying to do in the component:

   ngOnInit(){    //reading the JSON file and loading all into this.mainFields    const formControls = {};    this.mainFields.forEach((row) => {             row.forEach((field) => {                 let controlOptions;                 let value = ''                 if (field.defaultValue !== undefined && field.defaultValue !== '')                     value = field.defaultValue;                 if (field.type === 'select') {                     this.dummyNgModel[field.controlName] = value;                 }                 controlOptions = new FormControl(value);                 formControls[field.controlName] = controlOptions;             });         });         this.orderForm = this.fb.group(formControls);         //...       } 

But it still doesn't work

     
 
 

Lista de respuestas

0
 
vote

Creo que no tiene etiqueta Ngmodel para enlazar y guardar al valor seleccionado. Es por eso que cuando selecciona Valor por primera vez. Se estrella porque no hay variable para unirse en

 

I think you haven't NgModel tag to bind and save to selected value. That's why when you select value for the first time. It crashes because there is no variable to bind on

 
 
       
       
0
 
vote

¿Puede dar más detalles sobre cómo construir el formulario?

Le sugiero que se asegure de que el formcontrolname sea parte del formulario que construya:

  let form = formBuilder.group({     ClientIDCodeQualifier: [''] })   

Una solución sería introducir el valor Ngmodel, y luego al enviar su formulario, configura el valor almacenado:

  <p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values" [(ngModel)]="selectedValue"></p-dropdown>  ngOnSubmit() {    this.form.controls['ClientIDCodeQualifier'].setValue(selectedValue); }   

y luego verifique si el formulario es válido. Espero que ayude!

 

Can you give more details on how you build the form?

I'd suggest that you make sure that the formControlName is part of the form you build:

let form = formBuilder.group({     ClientIDCodeQualifier: [''] }) 

An workaround would be to introduce the NgModel value, and then when submitting your form, you set the stored value:

<p-dropdown [formControlName]="f.controlName" *ngIf="f.type==='select'" [autoDisplayFirst]="false" [options]="f.values" [(ngModel)]="selectedValue"></p-dropdown>  ngOnSubmit() {    this.form.controls['ClientIDCodeQualifier'].setValue(selectedValue); } 

And then verify if the form is valid. Hope it helps!

 
 
0
 
vote

Pruebe esto

  <p-dropdown [options]="cars" [(ngModel)]="selectedCar1">   

Clase de exportación DropDownDEMO {

  data->root0  

}

 

Try this

<p-dropdown [options]="cars" [(ngModel)]="selectedCar1"> 

export class DropdownDemo {

cars: SelectItem[]; selectedCar1: string;     constructor() {      this.cars = [         {label: 'Audi', value: 'Audi'},         {label: 'BMW', value: 'BMW'},         {label: 'Fiat', value: 'Fiat'},         {label: 'Ford', value: 'Ford'},         {label: 'Honda', value: 'Honda'},         {label: 'Jaguar', value: 'Jaguar'},         {label: 'Mercedes', value: 'Mercedes'},         {label: 'Renault', value: 'Renault'},         {label: 'VW', value: 'VW'},         {label: 'Volvo', value: 'Volvo'}     ];  } 

}

 
 
0
 
vote

tuvo el mismo problema que una desplegable Primeng en un diálogo no se abrirá una segunda vez después de la selección.
Revisé si las opciones aún tenían valores y lo hicieron.
No hubo diferencia en el uso de data->root111 o nombre para mí.

Agregar data->root2 a la desplegable fue la solución para mí.

 

Had the same problem that a PrimeNG drop-down in a dialog won't open a second time after selection.
I checked if the options still had values and they did.
There was no difference in using ngModel or name for me.

Adding appendTo="body" to the drop-down was the solution for me.

 
 

Relacionados problema

1  Angular 2 / Primeng - Expresión ha cambiado después de que se verifique. Binding Ngmodel en el último control de forma no válida  ( Angular 2 primeng expression has changed after it was checked binding ngmod ) 
Estoy teniendo un problema en el que cuando el último elemento en mi forma tiene un valor vinculado a él, el error "la expresión ha cambiado después de que se...

0  Angular2 Edición de Primeng Bandera sucia  ( Angular2 primeng editing dirty flag ) 
Estoy usando Primeng y tengo la mesa como editable, pero ¿cómo identifico qué filas se cambiaron, ya que no veo ningún tipo de "ng-sucio" u otro conjunto de b...

0  Obtención de errores en la consola para el número, la cadena, Boolean en Console.CanNot Encuentre un objeto de soporte diferente '100' de tipo 'Número'  ( Getting error on console for number string boolean on console cannot find a diff ) 
He implementado esto por debajo del código y sus datos que muestran correctamente en la página, pero estoy tratando de descubrir por qué su error de entrega e...

0  Error: No se puede unir a 'Sugerencias' ya que no es una propiedad conocida de 'p-autocompletar' Primeng  ( Error cant bind to suggestions since it isnt a known property of p autocom ) 
Instalé Primeng en mi proyecto iónico para poder usar el autocompletar, y seguí todas las recomendaciones, pero todavía tengo el error: Error: Errores de p...

0  Cancelar un API de suscripción - Descanso iónico  ( Cancel a subscription api rest ionic ) 
Cuando llamo a un servicio web, por autocompletar. Por ejemplo, escribiré la palabra "vehículo", cuando empiece a escribir, enviará un servicio para obtener t...

5  Se negó a aplicar estilo de 'http: // localhost: 1234 / node_modules / Primeicons / Primeicons.css' porque su tipo MIME ('texto / html')  ( Refused to apply style from http localhost1234 node modules primeicons prime ) 
Estoy obteniendo por debajo del error al agregar debajo de los estilos en index.html en la aplicación angular 6. se negó a aplicar el estilo de ' http:...

1  Cómo restablecer los datos en el diálogo P  ( How to reset data in the p dialog ) 
P-diálogo Al hacer clic en el icono de Cerrar Barra de título, los datos deben restablecer cómo hacerlo ...

1  Dropdown Generar opciones de la función - Primeng  ( Dropdown generate options from function primeng ) 
Quiero generar el menú desplegable ( https://www.primefaces.org/primeng/ Opciones # / desplegable ) de una función. Función: getSelectItemsByProperty(na...

0  Iónico 2 con estilo Primeng no está cargando  ( Ionic 2 with primeng style is not loading ) 
Actualmente estoy trabajando con el P-DataTable y puedo usarlo correctamente. El gran problema es que el estilo no está cargando. El propio P-DataTable está f...

0  Vinculante Una matriz de fechas con el calendario de Primeng no está funcionando  ( Binding an array of dates with primeng calendar is not working ) 
Estoy usando un calendario de Primeng para seleccionar varias fechas, y voy al componente a una matriz de fechas usando [(ngmodel)]. Cuando selecciono una fec...




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