Olá pessoal, hoje vamos fazer um post para enviar alguns dados a nossa API REST.

Primeiro no nosso serviço iremos criar um método http utilizando o HttpClient.

Vamos inserir o seguinte código abaixo para se comunicar com a url desejada.

//POST ENVIA DADOS PARA API
post(produtos: any){
return this.http.post('http://localhost:3000/produtos/', produtos)
}

Observe que essa url conterá o endereço http://localhost:3000/produtos/ disponibilizado pela API REST fake do json-server.

Agora no nosso component.ts vamos adicionar as seguintes funções.

Para que nosso post dê certo, primeiro temos que iniciar um formulário, vamos criar uma variável chamada novoProdutoForm.

public novoProdutoForm: FormGroup | nenhum;

Em seguida, criaremos a função chamada initForm.

//INICIA FORMULARIO
initForm() {
this.novoProdutoForm = this.formBuilder.group({
nome: [''],
descricao: [''],
id: new FormControl(0),
})
}

Também vamos chamar nosso initForm dentro do nosso ngOnInit.

Agora vamos criar uma função para enviar os dados preenchidos do formulário para a API FAKE.

//ENVIAR
async enviar() {
const {
nome,
descricao,
id,

} = this.novoProdutoForm.value;

const object = {
nome: nome,
descricao: descricao,
id: id,
};

this.criarPost(object);
this.limparCampos();
this.getLista();
}

criarPost(object: object) {
this.serviceCrud. postar ( objeto ). assinar ();
}

Adicionei uma função para limpar o formulário após enviarmos os dados para API.

//LIMPAR FORMULARIO //COMPONENT.TS
limparCampos() {
isso . getLista ();
isso . initForm ();
}

Agora no nosso component HTML.

< form [ formGroup ]= "novoProdutoForm" >
< div class = "mb-3" >
< label for = "exampleFormControlInput1" class = "form-label" > < h4 > Novo Produto / Editar Produto < / h4 > </ label >
< input formControlName = "nome" type = "text" class = "form-control" id = "exemploFormControlInput1"
placeholder = "Digite o nome do produto..." >
</ div >
< div class = "mb-3" >
< label for = "exampleFormControlTextarea1" class = "form-label" > < h6 > Descrição do produto < / h6 > </ label >
< textarea formControlName = " descricao " class = "form-control" id = "exemploFormControlTextarea1"
linhas = "3" > </ textarea >
</ div >
<div >
< botão class = "btn btn-success" ( clique )= "enviar()" > Salvar </ botão >
</ div >
</ form >

Assim que preenchermos vai ficar assim nossa tela.

E assim nosso post estará funcionando perfeitamente.