Angular Delete Operation Returns Undefined

Question

I need to delete an item from my API, so I did a service that runs a delete according to the ID it receives from my application’s ID field. I also made a method that invokes this service and executes it by clicking my delete button. I tried to make a biding that passes the entered value in the field to an ID variable of type number, this variable is used as parameter within my methods.

What happens is that when I click the button I get an error 404 in the execution of delete and the parameter that appears in the url is Undefined, I made a console.log to see if I was returning the value from within the ID field, and the result was Undefined as well. But I don’t understand.

Can you please point out the mistake and give me a brief explanation of what I did wrong? Thank you!

edit-product.component.html

 <!-- Nav -->
 <nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="#">
      <img src="https://tecnoblog.net/meiobit/wp-content/uploads_legacy/TuxROCK_thumb.png" width="30" height="30" class="d-inline-block align-top" alt="">
      Editor
    </a>
  </nav>
 <!----> 
 <!--Editar Descrição -->
 <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" [id]="id" id="inputGroup-sizing-sm">ID do Produto</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>
<!---->
<!--Editar Descrição -->
  <div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroup-sizing-sm">Editar Descrição</span>
    </div>
    <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
  </div>
<!---->

 <!--Editar Preço -->
 <div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Editar Preço</span>
  </div>
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
<!---->

<button type="button" class="btn btn-primary">Salvar Edição</button>
<button type="button"  class="btn btn-danger" (click)="deletaProduto(id)">Excluir Produto</button>
  

edit-product.component.html

import { Component, OnInit } from '@angular/core';
import { Produtos } from 'src/app/interfaces/produtos';
import { ProdutosServices } from '../../services/produtos-services';
import { ListaProdutosComponent } from '../lista-produtos/lista-produtos.component';

@Component({
  selector: 'app-edita-produto',
  templateUrl: './edita-produto.component.html',
  styleUrls: ['./edita-produto.component.css']
})
export class EditaProdutoComponent implements OnInit {

  listaProdutos: ListaProdutosComponent;
  id: number;

  constructor(private produtosServices: ProdutosServices) { }

  ngOnInit(): void {
  }

  // tslint:disable-next-line: typedef
  deletaProduto(id: number){
    console.log(this.id);
    this.produtosServices.deletaProduto(id)
    .subscribe(() => { alert('Produto Deletado!'); },
      () => {alert('Falha ao Deletar Produto!'); });
  }

}

service products

import { Injectable, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Produtos } from '../interfaces/produtos';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ProdutosServices {
  

  constructor(private http: HttpClient) { }

  getListaProdutos(): Observable<Produtos[]>{
    // tslint:disable-next-line: no-unused-expression
    const url = `${environment.produtosApiUrl}/produtos`;
    return this.http.get<Produtos[]>(url);
  }; 

  deletaProduto(id: number): Observable<Produtos>{
    const url = `${environment.produtosApiUrl}/produtos/${id}`;
    return this.http.delete<Produtos>(url);
  }

Answer 1

Well, looking at my code I saw that I was using the form in the wrong way. To fix this I implemented the [(ngModel)] inside my form and replaced the span with an input of type text that got as follows:

ID do Produto <input type="text"  [(ngModel)]="id" name="id">

That solved the problem.