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-select
escuchar 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 .