es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Formularios reactivos no enlazan la lista desplegable si no hay interacción con el formulario en Angular.

Formularios reactivos no enlazan la lista desplegable si no hay interacción con el formulario en Angular.

29 May, 2023 Programación

Tengo un formulario que incluye 3 menús desplegables, estos menús obtienen sus datos de una API.
El problema es que los menús desplegables no vinculan los datos si no hago clic en ellos (si no hago clic en cualquier campo del formulario).

Mi HTML:

<form [formgroup]="dropdownsForm" novalidate="" class="needs-validation">
    <div class="dropdown">
        <select class="form-control" formcontrolname="CountryName" [attr.data-live-search]="true" style="width: 150px;">
            <option *ngfor="let Country of allCountrys" [value]="Country.id">
                {{Country.title}}
            </option>
        </select>
    </div>
</form>

Mi ts:

allCountrys: DropDownListForLkpsDto[];

constructor(
    private fb: FormBuilder,
    private _countryService: CountryServiceProxy
) {}

ngOnInit(): void {
    this.dropdownsForm = this.fb.group({
        CountryName: [""],
    });

    this._countryService.getAllCountrysForDDl().subscribe(result => {
        this.allCountrys = result;
    });
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es que los menús desplegables no vinculan los datos a menos que se haga clic en ellos o se retire el foco. Una posible solución es agregar un evento (change) a cada menú desplegable para actualizar el valor del control de formulario cuando se selecciona una nueva opción.

    Por ejemplo, podemos modificar el código HTML de la siguiente manera:

    <form [formgroup]="dropdownsForm" novalidate="" class="needs-validation">
  <div class="dropdown">
    <select class="form-control" formcontrolname="NombreDelPais" [attr.data-live-search]="true" style="width: 150px;" (change)="updateCountryName($event.target.value)">
      <option *ngfor="let Country of allCountrys" [value]="Country.id">
        {{Country.title}}
      </option>
    </select>
  </div>
</form>

    Luego, en la clase del componente, podemos definir el método updateCountryName para actualizar el respectivo control de formulario cuando se selecciona un nuevo país:

    updateCountryName(countryId: string) {
  this.dropdownsForm.patchValue({
    NombreDelPais: countryId
  });
}

    Esto debería asegurar que los datos del menú desplegable estén vinculados al control de formulario sin que el usuario tenga que hacer clic fuera del menú desplegable.

Comments are closed.