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.