0

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']);
  }
}

1 respuesta 1

0

en tu caso haría los siguientes cambios en tu component.ts

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;


  constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private _peliculaService: PeliculasService
  ) {
       this.form = this.fb.group({
          id:[""],
          titulo:["",Validators.required],
          fecha:["",Validators.required],
          descripcion:["",Validators.required],
          imagen:["",Validators.required],
       }); 
  }

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe((params: ParamMap) => {
          this.id = params.get('id') // Aqui recibes el id de la pelicula
        
// validas si cuentas con el id de la pelicula en la  Url
          if(this.id!==null){ 

      
 /*
haces una consulta a tu base de datos mediante un servicio 
y recibes los datos de la pelicula y se lo asignas a cada 
uno de los controles de tu formulario de esta manera

Aqui debes tener en cuenta el tipado de la respuesta para editar el código correctamnete*/
    
          this.__peliculaService.getPelicula(this.id).subscribe((pelicula)=>{
            this.form.patchValue({
            id:pelicula.id,
            title: pelicula.titulo,
            release_date: pelicula.fecha,
            overview: pelicula.descripcion,
            cover_url: pelicula.imagen,
          })
   
         } 
       })
    }


   agregarPelicula(){
// Aqui se comprueba antes de enviar a guardar si el formulario es valido
       if (this.form.invalid) {
          this.form.markAllAsTouched()
          return
       }

    this._peliculaService.agregarPelicula(this.form.value).subscribe(resp=>{
     // aqui envias mediante tu servicio al backend los datos, 
     // si tu id es valido, seria actualizar, sino es crear registro
     
    // Luego compruebas si la respuesta del backend no es satisfactoria
    // y lanzas una alerta, todo esto puede cambiar segun como desarrolles tu 
    // aplicación, sino te redirecciona a la pagina del listado de peliculas

    if(resp.codigo!=='success'){
         alert('No se ejecuto la acción')
         return
    }


     this.router.navigate(['/peliculas/listado-de-peliculas']);

     });

     }
}

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.