Saltar al contenido

Deshabilitar la entrada de formulario reactivo angular según el valor de selección

Esta es el arreglo más exacta que te podemos compartir, pero obsérvala detenidamente y analiza si se puede adaptar a tu proyecto.

Solución:

Podrás escuchar el valueChanges evento de la forma:

this.paymentForm.valueChanges.subscribe((value) => 
  if(value.paymentMethod == 'opt-1')
   this.paymentForm.controls['testInput'].disable();
  else
   this.paymentForm.controls['testInput'].enable();
  
);

Así que cada vez que el select cambios, el valueChanges se llama al evento, las condiciones se activan y habilitará o deshabilitará formControl.

Puede aprovechar la selectionChange@Output propiedad en MatSelect y reaccionar en consecuencia:

onSelectionChanged(value) 
  console.log(value);
  if(value === 'opt-1') 
    this.paymentForm.get('testInput').disable();
   else 
    this.paymentForm.get('testInput').enable();
  

y en plantilla


Aquí está un Ejemplo de StackBlitz para su ref.

NOTA: En caso de que haya más controles en su formulario que solo mat-selectescuchar valueChanges en general, el formulario podría ser costoso, ya que esto se activará cada vez que haya un cambio en cualquiera de los controles del formulario. Todo lo que nos preocupa es el cambio en el mat-select cambio de selección.

Aunque ya se han proporcionado respuestas, si alguno se ha topado con el mismo problema. Puede deshabilitar directamente un campo de formulario accediendo directamente a su control

Había creado un enlace de demostración de Stackblitz

   
  
       // Disables the input once paymentMethod's formControlName value is opt-1    
       

Comentarios y puntuaciones de la guía

Recuerda algo, que tienes concesión de aclarar tu experiencia si atinaste tu obstáculo .

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *