Entrada #12 - 11/03/2024 - 8:00pm

Realizamos la conexión de la pagina web hecha en angular con la capa lógica en Java Spring Boot.

Agregamos lo siguiente:

En components de Empleados:

Aqui creamos un grupo de formulario, para hacer posible la ejecución de las funciones. La variable repetido lee el mensaje enviado por la capa logica, para indicar que el nombre esta repetido.

Se creo un "ngOnInit". Esto gestiona la lista que se despliega y el grupo de formulario:

Se creo el método "list", que llama a la función que esta en java desde el "empleadosService" para mostrar la lista:

Función en el service:

Luego tenemos la funcion "insert", que inserta un elemento:

En service la funcion de insertar luce así:

En el ".html", donde esta la presentación se agrego lo siguiente:

Esto hace una especie de "for" que carga todo lo que esta en la BD.

En la ventana emergente se crearon las funciones "(click)" para los botones, que ejecutan lo que esta en el .ts de components. Ejemplo:

Por ultimo hay texto que indica errores, el cual es lo siguiente que lleva "*ngIf", es un "if" que verifica ciertas validaciones:

Las validaciones son las siguientes:

Uso de expresiones regulares:

Con: https://regexr.com/

Se pueden generar expresiones regulares, así con el "Validators.pattern" de la figura anterior buscamos como verificar que el numero sea valido.

Listamos los problemas que tuvimos:

1. FormControl y FormGroup no se importaba bien. Solución: Escribir los métodos o funciones lo importaban automáticamente.

2. Las validaciones en el html daban un problema con los nulos. Solución: Agregar un "?" después de cada método, es como algo de seguridad que indica que pueden haber nulos.

3. un error con el cliente htttp. Solución: Se arreglo importando provideHttpClient() en app.config.ts

Al final, aunque era un proceso sencillo llevó tiempo, ya que no conocemos del todo el lenguaje, debimos consultar videos, documentacion, etc, para poder solventar todos los errores o guiarnos a través del TypeScript de angular. Adjunto fuentes:

https://www.reddit.com/r/angular/comments/1954d83/angular_17_getting_a_nullinjectorerror_no/ (Error 3)

https://stackoverflow.com/questions/39152071/cant-bind-to-formgroup-since-it-isnt-a-known-property-of-form (Error 2)

https://angular.io/guide/form-validation

https://stackoverflow.com/questions/70209577/how-to-make-required-form-validation-using-angular-and-formbuilder

https://angular.io/api/forms/FormControl (Error 1)

https://getbootstrap.com/docs/5.3/components/modal/

Adjunto pruebas:

Acá vemos que indica que el nombre es requerido, esto no se va hasta que se llena.