0

introducir la descripción de la imagen aquí

Aqui dejo mi error que tengo al momento de llenar el formulario y darle clic me manda este error lo que intente fue crear una función para guardar los datos, sin embargo, aun no logro entender esta parte, espero y me puedan ayudar por favor y gracias.

1
  • los errores 500 son errores del servidor no de tu aplicacion de angular el 11 ago. 2020 a las 15:55

1 respuesta 1

2

Te recomiendo usar Reactive Forms

¿Qué es Reactive forms?

Es un modulo de Angular que nos permite realizar formularios reactivos

¿Qué es algo reactivo?

Es algo que reacciona ante ciertos "cambios" o "eventos"

¿Cómo lo implementamos?

Bueno, para implementarlo, primero vamos a importarlo en nuestro modulo: (en mi caso lo voy a importar en el app.module.ts)

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Luego, voy a ir al componente donde lo requiero y voy a crear mi FormGroup (es el formulario que va a contener mis inputs) y le voy a decir que FormControl tiene (cada input). En el FormControl le podemos decir por ejemplo, que validaciones requiero o que valor inicial va a tener.

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-profile-editor',
  templateUrl: './profile-editor.component.html',
  styleUrls: ['./profile-editor.component.css']
})
export class ProfileEditorComponent {
  profileForm = new FormGroup({
    firstName: new FormControl(''),
    lastName: new FormControl(''),
  });
}

Por último, falta decirle a nuestro FormGroup y FormControl cuales son los elementos html que los van a contener:

<form [formGroup]="profileForm">
  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>    
  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>    
</form>

¿Cómo capturar data de mi form cuando hago click en un botón?

Como es en tu caso, necesitas recibir la data en un servicio, vamos a ver como lo haríamos.

Para hacer esto, vamos a modificar ligeramente el html.

Agregamos el evento onSubmit en el form y un botón del tipo submit dentro del mismo.

    <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">      
          <label>
            First Name:
            <input type="text" formControlName="firstName">
          </label>        
          <label>
            Last Name:
            <input type="text" formControlName="lastName">
          </label>
          <button type="submit">Submit</button>   
    </form>

Luego, en nuestro component.ts creamos la funcion de submit para recibir los valores y poder manipularlos (se debe llamar igual que como le pusimos en el html, en este caso onSubmit)

onSubmit() {
  console.warn(this.profileForm.value); //en this.profileForm.value tenemos el valor del form para poder manipularlo a nuestro gusto. Si queremos acceder a, por ejemplo, un control especifico, podemos hacerlo con this.profileForm.controls['nombreControl']
}

Vos lo que tendrias que hacer, es dentro de este onSubmit() llamar a tu servicio, pasandole los valores del form

2
  • que tal buenas tardes @Sebastian, bueno primero que nada quiero agradecerte por lo que me compartiste hasta el momento ya puedo ver lo que mando mediante consola, cabe mencionar que tengo aun otra falla me aparece esto registro-empleados.component.ts:60 HttpErrorResponse :8081/api/usuario/:1 Failed to load resource: the server responded with a status of 500 () registro-empleados.component.ts:60 HttpErrorResponse este error me lo muestra en consola a la hora de enviar los datos que se mandan al Backend me gustaria saber si me porias ayudar nuevamente por favor y te agradezco el 11 ago. 2020 a las 21:39
  • Puede mostrar que sale en el network si estas enviando data al back : el 12 ago. 2020 a las 1:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.