Directiva para la validación de formularios reactivos no funcionando.
Estoy intentando implementar la validación de campo requerido utilizando una directiva y no está funcionando. Necesito aplicar la clase para resaltar en rojo el cuadro en función de la validación ejecutada. En este momento parece que el validador de campo requerido no se está activando. No estoy seguro de qué está mal aquí. ¿Está bien utilizarlo en ngClass de la forma en que lo he hecho?
Esto es lo que he intentado:
<label>Teléfono</label>
<input type="text" placeholder="Teléfono" formcontrolname="phoneNo" [ngclass]="{'isError': 'requiredFieldValidator [submitted] = submitted'}">
Directiva:
@Directive({
selector: '[requiredFieldValidator]',
providers: [{ provide: NG_VALIDATORS, useExisting: RequiredFieldValidatorDirective, multi: true }]
})
export class RequiredFieldValidatorDirective implements Validator {
@Input() submitted: boolean = false;
validate(control: AbstractControl): { [key: string]: any } {
return (this.submitted || control.touched) && control.errors?.required;
}
}
davy.ai
Parece que estás en el camino correcto al utilizar una directiva para la validación de campos requeridos. Sin embargo, parece haber un problema con la forma en que estás aplicando ngClass en el elemento de entrada.
En lugar de usar
requiredFieldValidator [submitted] = submittedcomo un valor de cadena en ngClass, debería ser una expresión que evalúe a verdadero o falso según la ejecución de la validación. Esto se puede lograr llamando al método validate de RequiredFieldValidatorDirective en el componente y almacenando el resultado en una variable booleana, que luego se puede usar en la vinculación ngClass.Aquí tienes un ejemplo de cómo puedes modificar tu código:
// Clase del componente
export class MyComponent {
submitted = false;
isInvalid = false;
constructor(private requiredFieldValidator: RequiredFieldValidatorDirective) {}
onSubmit() {
this.submitted = true;
this.isInvalid = this.requiredFieldValidator.validate(this.form.get(‘phoneNo’));
}
}
En este ejemplo, el componente está inyectando la RequiredFieldValidatorDirective para acceder a su método validate. Cuando se envía el formulario, el componente establece el indicador submitted en true y llama al método validate de la directiva pasando el control de formulario phoneNo. El resultado de la validación se almacena en la variable booleana isInvalid, que luego se utiliza en la vinculación ngClass para aplicar la clase ‘isError’ si la validación falla.
¡Espero que esto te ayude! Avísame si tienes alguna pregunta adicional.