Descripción
Desarrollar el TypeScript de un componente en Angular que implemente un formulario reactivo para capturar información de un autor.
Dada la siguiente interfaz Author
en Angular:
export interface Author {
id: number;
firstName: string;
lastName: string;
birthDate: Date;
salary: number;
country: string;
bio: string;
wikipediaUrl: string;
}
Y dado el siguiente componente en Angular:
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { Author } from '../../../interfaces/author.model';
@Component({
selector: 'app-author-form',
standalone: true,
imports: [ReactiveFormsModule, RouterLink],
templateUrl: './author-form.component.html',
styleUrl: './author-form.component.css'
})
export class AuthorFormComponent implements OnInit{
authorForm = ????
isUpdate: boolean = false;
author: Author | undefined;
constructor(
private httpClient: HttpClient,
private activatedRoute: ActivatedRoute
) {}
ngOnInit(): void {
this.activatedRoute.params.subscribe(params => {
const id = params['id'];
if(!id) {
return; // si no hay categoría se termina el método
}
this.httpClient.get<Author>(`http://localhost:3000/author/${id}`).subscribe(author => {
this.isUpdate = true;
this.author = author;
// Aquí debes cargar el author en el formulario
????
});
});
}
save() {
}
}
Copia y pega el código y completa el anterior código de TypeScript añadiendo:
authorForm
debe ser un FormGroup con campos FormControl para cada atributo de la interfaz Author.ngOnInit
aquí debes cargar el objetoAuthor
que llega del backend en el formulario, esto permitiría que el formulario aparezca con los datos del autor precargados.save()
El método save se invocaría cuando el usuario hace clic en el botón enviar del formulario. Aquí debes extraer los campos del formulario y crear un objeto Author a partir de ellos para enviarlo a backend.- Si la variable
isUpdate
es true lo enviarás por PUT ahttp://localhost:3000/author/${id}
. - Si la variable
isUpdate
es false lo enviarás por POST ahttp://localhost:3000/author
.
- Si la variable
Solución al ejercicio de programación en Angular
¡Desbloquea la solución completa!
Completa el ejercicio de programación en Angular para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.
Practica con ejercicios de programación en Angular
Mejora tus habilidades con cientos de ejercicios de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.
Asistente de IA
Aprende de tus errores
Progreso
Mide tu avance
Certificación
Valida tus habilidades
Únete a miles de desarrolladores mejorando sus habilidades en Angular