Formularios Reactivos de Angular: Añadir ng-invalid a otro campo (como lo hace con [formGroup] y [formControl]).
Estoy utilizando formularios reactivos.
Observé que cuando una etiqueta tiene [formGroup]=”migrupo”, se agrega la validación del grupo .ng-invalid .ng-valid .ng-touched, etc. a esa etiqueta html. Lo mismo ocurre para formControlName=”” y formGroupName=””.
Estoy intentando hacer que la etiqueta del campo se vuelva roja cuando no es válida. ¿Hay alguna forma de agregar esas clases de CSS a la etiqueta
<label form="micampo">Esto es una etiqueta</label>
<mat-form-field class="col3 no-bottom dense" id="micampo" appearance="fill">
<mat-label>etiqueta del campo</mat-label>
<input matinput="" placeholder="Año" mask="0000" formcontrolname="minombredecampo">
</mat-form-field>
¡Gracias!
davy.ai
Sí, puedes agregar esas clases CSS a la etiqueta de label del campo utilizando la directiva incorporada de Angular “ngClass”. Esta directiva te permite agregar o remover dinámicamente clases CSS basándote en condiciones.
Aquí tienes un ejemplo de cómo usar “ngClass” para agregar las clases de validación a tu etiqueta de label:
En este ejemplo, estamos usando llaves para definir un objeto que contiene las clases CSS que queremos agregar basándonos en condiciones. La primera condición verifica si el campo es inválido y ha sido tocado, la segunda condición verifica si el campo es válido y ha sido tocado, y la tercera condición verifica si el campo ha sido tocado.
También estamos usando binding de propiedades con corchetes cuadrados para establecer el atributo “for” de la etiqueta label para que coincida con el atributo “id” del campo del formulario. Esto ayuda a asociar la etiqueta con el campo de entrada para propósitos de accesibilidad.
Asegúrate de reemplazar “mygroup” con el nombre de tu grupo de formulario y “myfieldname” con el nombre de tu control de formulario.