angular makes post request of a reactive form automatically - node.js

Question

I am trying to develop crud using mean stack. When making HTTP requests, angular works fine, but I only want angular to make post request when the submit button for the reactive form is pressed, but it makes both get and post request to the nodejs/express server automatically. is there any option to make the post only when the form submit button is triggered? Thanks a lot.
pdt: I know is making both requests because I am using morgan in nodejs server.
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>Eliminar</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);
}
}