0

Estoy trabajando con este formulario. Al seleccionar una opción del select combo me cambia el contenido on change, pero no hace el submit, es lo que pretendo, al mismo tiempo me queda "selected" la opción que yo le diga desde el componente:

 this.selectedOption = this.periodetalle.id_turno;

Aparentemente todo funciona bien, se cambia la opción, queda "selected" y envía el formulario al hacer submit en el botón.

Sin embargo la consola de Chrome me tira el siguiente error:

It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.

El error está claro, pero necesito saber cómo sustituir [(ngModel)]="selectedOption" para que me siga funcionando.

 <form [formGroup]="reactiveFormTurnos" (ngSubmit)="onSubmit( f )" #f="ngForm" class="form-inline">      
   <div class="form-group">
    <select 
    class="form-control"
    formControlName="id_turno"
    name="id_turno" 
    (change)="onSubmitSelect()"
    [(ngModel)]="selectedOption">
        <option 
        *ngFor="let listat of listaturnos; let x = index" 
        [value]="listat.id_turno"
        >{{listat.turno}} - {{listat.tipo_turno}} - {{listat.turno_horario}}</option>
    </select>
    <button type="submit" class="btn btn-info ml-2">Establecer turno</button>
  </div> 
 </form>    
0

3 respuestas 3

1

Primero de todo, estas mezclando conceptos de "Reactive forms" y "template driven forms" son dos maneras distintas de trabajar con formularios en angular.

Reactive forms setea el estado desde el componente, sin embargo template driven form setea(binding) desde html al componente.

ngForm es una directiva de template driven form tal como lo pone en la documentación, por lo tanto no tiene mucho sentido en formulario reactivo.

Y por último, para escuchar cambios en un campo en concreto del formulario en reactive forms, puedes suscribirte al observable

En tu componentes puedes hacer lo siguiente.

reactiveFormTurnos.get('id_turno').valueChanges.subscribe(val => {
  // tu código
  this.selectedOption = val;
})
<form [formGroup]="reactiveFormTurnos" (ngSubmit)="onSubmit( f )" class="form-inline">      
   <div class="form-group">
    <select 
    class="form-control"
    formControlName="id_turno"
    name="id_turno" 
>
        <option 
        *ngFor="let listat of listaturnos; let x = index" 
        [value]="listat.id_turno"
        >{{listat.turno}} - {{listat.tipo_turno}} - {{listat.turno_horario}}</option>
    </select>
    <button type="submit" class="btn btn-info ml-2">Establecer turno</button>
  </div> 
 </form> 
2
  • No entiendo qué hago con this.selectedOption = val; en tu ejemplo. Cómo indico al formulario que esa opción debe quedar "selected" cuando hago el change?
    – rafa_pe
    el 8 may. 2020 a las 19:56
  • cuando seleccionas una opción del select esa se queda seleccionada automaticamente. Pero si preguntas como setear una opción seleccionada cuando traes los datos de backend o por cualquier otra razón tienes que usar patchValue. Aquí tienes una demo stackblitz.com/edit/angular-xxiw3m
    – hawks
    el 8 may. 2020 a las 20:06
1

Intenta esto

<select class="form-control form-control-user" data-live-search="true"
    (ngModelChange)="buscarValorDomicilio($event)" formControlName="punto"
    [class.is-invalid]="noPunto">
    <option *ngFor="let punto of clientePuntos; index as i" [ngValue]='punto'>
        {{punto.nombrePunto}}
    </option>
</select>

No mezcle formulario reactivo con formulario por template esto sobra #f="ngForm"

1

Como estas? En principio eliminaría el [(ngmodel)] de todos tus templates por estar deprecado.

Cambialo por lo siguiente [formControl]="myControl" en tus .html

En tus archivos .ts deberias tener la definición de tus campos (como por ejemplo)

this.formGroup = this.formBuilder.group({ razonSocial: ['', [ Validators.minLength(3), Validators.maxLength(10), Validators.required ] ]})

Te paso un enlace a un form reactivo que desarrollado con angular v8 [enlace] (https://github.com/cristian16b/Analisis-Bioq/tree/master/src/app/crear-obra-social) Esta el template y el tsc, tal vez te sirva para orientarte

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.