Блог

Я пытаюсь разработать crud, используя mean stack. При выполнении HTTP-запросов angular работает нормально, но я хочу, чтобы angular выполнял post-запрос только при нажатии кнопки отправки для реактивной формы, но он автоматически отправляет запросы get и post на сервер nodejs / express. есть ли какая-либо возможность отправлять сообщение только при срабатывании кнопки отправки формы? Большое спасибо. pdt: я знаю, что делает оба запроса, потому что я использую morgan на сервере nodejs.

empleados.component.html

 <form [formGroup]="nuevoEmpleado" (submit)="addEmpleado()">
    <label>
        Nombre:
        <input type="text" formControlName="nombre">
    </label>
    <label>
        Apellido:
        <input type="text" formControlName="apellido">
    </label>
    <label>
        Cargo:
        <input type="text" formControlName="cargo">
    </label>
    <button type="submit" class="btn btn-primary">Agregar Empleado</button>
</form>

<!--tabla lista de empleados -->


<table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Nombre</th>
        <th scope="col">Apellido</th>
        <th scope="col">Cargo</th>
        <th scope="col">acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let empleado of listaEmpleados; let i=index">
        <th scope="row">{{ i 1 }}</th>
        <td>{{ empleado.nombre }}</td>
        <td>{{ empleado.apellido }}</td>
        <td>{{ empleado.cargo }}</td>
        <td><a href="#">Eliminar</a></td>
      </tr>      
    </tbody>
  </table>



  

empleados.components.ts

 import { Component, OnInit } from '@angular/core';
import { EmpleadosService } from './empleados.service';
import { FormControl , FormGroup } from '@angular/forms';
import { empleado } from '../interfaces/empleado'

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

  nuevoEmpleado = new FormGroup({
    nombre: new FormControl(''),
    apellido: new FormControl(''),
    cargo: new FormControl('')
  });

  listaEmpleados: empleado[];

  constructor(private empleadosService: EmpleadosService) {}

  getListaEmpleados():void{
    this.empleadosService.getlistaEmpleados().subscribe(empleados => this.listaEmpleados = empleados);
  };

  addEmpleado(){
    //this.empleadosService.addEmpleado(this.nuevoEmpleado.value).subscribe(res => console.log(res));    
    if(!this.nuevoEmpleado){
      return;
    } 
    this.empleadosService.addEmpleado(this.nuevoEmpleado.value).subscribe(res => console.log(res));      
  }

  ngOnInit(): void {
    this.getListaEmpleados();
    this.addEmpleado();
  }

}

  

empleados.service.ts

 import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { empleado } from '../interfaces/empleado';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EmpleadosService {
  url = 'http://localhost:3000';
  constructor(private http: HttpClient) {}

  getlistaEmpleados():Observable<empleado[]>{
    return this.http.get<empleado[]>(this.url);
  }

  addEmpleado(nuevoEmpleado):Observable<Object>{
    return this.http.post<empleado>(this.url , nuevoEmpleado);
  }
  
}