Necesito crear el método editar en el formulario, pero quiero aprovechar el código de crear una película, para si, pulso el botón editar, automáticamente los campos se puedan editar en el componente html.
Lo único que he intentado y porque lo he visto por internet es poner una condición en el titulo que si es true salga crear y si es false editar, pero no se muy bien, como hacer para que los campos se vuelvan editables, una vez que esta en el modo editar.
El componente html de crear es el siguiente:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="contenedor mx-auto w-50 border border-dark py-5 px-5 bg-gradient text-white">
<div class="row">
<div class="col-12 col-md-12 pb-4">
<h1 class="text-center">Añadir nueva pelicula</h1>
<!-- <h1 class="text-center" *ngIf="modo">Editar la pelicula</h1> -->
<hr/>
</div>
<div class="col-12 col-md-12">
<form [formGroup]="form" (ngSubmit)="agregarPelicula()">
<div class="row g-4">
<div class="col col-md-12 d-flex justify-content-between ">
<label for="name">Id </label>
<input id="name" type="number" formControlName="id"/>
</div>
<div class="col col-md-12 d-flex justify-content-between ">
<label for="name">Titulo de la pelicula </label>
<input id="name" type="text" formControlName="titulo"/>
</div>
<div class="col col-md-12 d-flex justify-content-between ">
<label for="name">Fecha de la pelicula </label>
<input id="name" type="text" formControlName="fecha"/>
</div>
<div class="col col-md-12 d-flex justify-content-between ">
<label for="name">Descripcion de la pelicula </label>
<input id="name" type="text" formControlName="descripcion"/>
</div>
<div class="col col-md-12 d-flex justify-content-between ">
<label for="name">Imagen de la pelicula </label>
<input id="name" type="text" formControlName="imagen" />
</div>
</div>
<div class="col- col-md-12 mt-5 text-end d-grid">
<button type="submit" class="btn btn-outline-light">Insertar pelicula</button>
</div>
<div class="d-grid col-12 mt-3">
<button type="button" class="btn btn-outline-dark" routerLink="/peliculas/listado-de-peliculas">Volver</button>
</div>
</form>
</div>
</div>
</div>
En el componente ts cree una variable id, que al pulsar en el botón, mediante el routing se mostraría la película seleccionada para su edición. Lo tengo comentado porque no se como seguir haciéndolo.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Peliculas } from 'src/app/mock/peliculas';
import { PeliculasService } from 'src/app/servicios/peliculas.service';
@Component({
selector: 'app-crear-pelicula',
templateUrl: './crear-pelicula.component.html',
styleUrls: ['./crear-pelicula.component.css'],
})
export class CrearPeliculaComponent {
form: FormGroup;
/* id: number;
isAddModel: boolean; */
constructor(
private fb: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private _peliculaService: PeliculasService
) {
this.form = this.fb.group({
id:["",Validators.required],
titulo:["",Validators.required],
fecha:["",Validators.required],
descripcion:["",Validators.required],
imagen:["",Validators.required],
});
}
ngOnInit() {
/* this.id = Number(this.route.snapshot.paramMap.get('id'));
this.isAddModel = !this.id;
this.form = this.fb.group({
id: ['', Validators.required],
titulo: ['', Validators.required],
fecha: ['', Validators.required],
descripcion: ['', Validators.required],
imagen: ['', Validators.required],
});
if (!this.isAddModel) {
} */
}
agregarPelicula() {
const pelicula: Peliculas = {
id: this.form.value.id,
title: this.form.value.titulo,
release_date: this.form.value.fecha,
overview: this.form.value.descripcion,
cover_url: this.form.value.imagen,
};
console.log(pelicula);
this._peliculaService.agregarPelicula(pelicula);
this.router.navigate(['/peliculas/listado-de-peliculas']);
}
}