Angular: 42. Formularios. Validaciones personalizadas

Vamos a ver cómo podemos crear nuestras propias validaciones de campos.

Siguiendo con la aplicación anterior. Hemos visto cómo se validan los campos de los formularios utilizando las validaciones estándar de Angular, como que un campo no esté vacío, que tenga formato de correo electrónico, etc. Pero vamos ver cómo podemos crear nuestras propias validaciones personalizadas.
Imaginemos que, en el campo apellido del formulario no queremos que se pueda introducir el valor exacto "herrera".

Vamos a crearnos una función en el componente como la que sigue:

Como se puede ver, es una función a la que se le pasa por parámetro un FormControl, que devuelve un booleano, y que comprueba si su valor es "herrera". Si es así, devolvemos verdadero, y si no es "herrera", devolvemos null. En estas funciones de validación debemos devolver verdadero cuando queramos que NO se cumpla la validación, es decir, cuando el apellido sea "herrera".

Una vez hecho esto, sólo tenemos que añadir la validación al campo apellido, como si fuera una validación estándar más de Angular:

Ahora arrancamos la aplicación y rellenamos los campos con valores válidos. Podemos comprobar que el formulario es válido:

Si en el apellido introducimos "herrera", comprobamos que el formulario cambia a inválido:

Y eso es todo.

Ahora vamos a hacer otra validación diferente. Vamos a crear dos campos de contraseña en el formulario, y vamos a validar que las dos contraseñas tienen que ser iguales, tal y como se suele hacer en los formularios de registro web.

Para ello, primero creamos en el html dos campos de contraseña:

A continuación añadimos esos dos campos al formulario del typeScript:

Como se puede comprobar, aquí hemos hecho algo extraño. Hemos creado los campos "password1" y "password2". Al campo "password1" le hemos añadido la validación de requerido como a los demás campos, sin embargo al campo "password2" le hemos añadido los validadores al final del formulario, en lugar de en el momento en que lo declaramos. Es simplemente por la curiosidad de que también se puede hacer así.

Entre los validadores de "password2" se encuentra la función "noIgual", que creamos en el mismo componente a continuación:

Ahora si arrancamos la aplicación, rellenamos todos los campos con valores válidos e introducimos diferentes valores en los campos de contraseña, nos aparecerá que el formulario no es válido:

Y si ponemos los mismos valores, aparecerá que sí es válido:

Y eso es todo.