0

tengo un problema al querer guardar los datos del formulario en la base de datos. Tengo la API, la interface. Pero no se como poder usar esa interface en un formGroup.

Este es mi fomulario

<mat-step [stepControl]="secondFormGroup" class="libro">
     <form [formGroup]="secondFormGroup" (ngSubmit)="saveLibro()" method="POST">
       <ng-template matStepLabel> Registro de Libros </ng-template>
       <mat-form-field class="formulario">
         <input matInput placeholder="Titulo" formControlName="TitleCtrl" required>
       </mat-form-field><br>
       <mat-form-field class="formulario">
         <input matInput placeholder="Codigo ISBN" formControlName="IsbnCtrl" required>
       </mat-form-field><br>
       <mat-form-field class="formulario">
         <input matInput placeholder="Cantidad Paginas" formControlName="PagesCtrl" required>
       </mat-form-field><br>
       <mat-form-field class="formulario">
         <input matInput placeholder="Editorial" formControlName="EditorialCtrl" required>
       </mat-form-field><br>
        <div>

         <button class="save" mat-raised-button > Guardar </button>
       </div>
     </form>
   </mat-step>

Esta seria la interface

export interface Libro {
    id?: number;
    isbn: string;
    titulo: string;
    cantidadPagina: string;
}

Y este es el archivo TS

    import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ServiceService } from '../../services/service.service';
import { Libro } from '../../interfaces/libro';

@Component({
  selector: 'app-reg-autor-libro-ejemplar',
  templateUrl: './reg-autor-libro-ejemplar.component.html',
  styleUrls: ['./reg-autor-libro-ejemplar.component.css']
})
export class RegAutorLibroEjemplarComponent implements OnInit {
  secondFormGroup: FormGroup;
  libro: Libro = {
    isbn: null,
    titulo: null,
    cantidadPagina: null
  };

  constructor(private _service: ServiceService) {}

    ngOnInit() {
      this.secondFormGroup = new FormGroup({
        TitleCtrl: new FormControl('', Validators.required),
        IsbnCtrl: new FormControl('', Validators.required),
        PagesCtrl: new FormControl('', Validators.required)
      });

    }


    saveLibro() {
      this._service.saveLibro(this.libro).subscribe(() => {
        alert('Registro Exitoso.');
      });
    }

}

En otros formularios utilizando ngModel, consegui hacer el POST con exito, pero en formularios reactivos aun no lo consegui, si por favor podrian guiarme en que debo corregir para poder ejecutar de forma correcta el metodo.

1 respuesta 1

0

Solo debes usar this.secondFormGroup.value para obtener los valores del formulario. De la siguiente forma:

saveLibro() {
  // Muestra los valores en consola
  console.log(this.secondFormGroup.value);

  // Asigna valores a la interfaz
  this.libro = {
    isbn: this.secondFormGroup.value['IsbnCtrl'],
    titulo: this.secondFormGroup.value['TitleCtrl'],
    cantidadPagina: this.secondFormGroup.value['PagesCtrl']
  }

 // Usa el servicio
  this._service.saveLibro(this.libro).subscribe(() => {
    alert('Registro Exitoso.');
  });
}

Ojo: En tu html usas formControlName="EditorialCtrl" que no está declarado en ningún lado.

Tu Respuesta

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

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