Salut à tous, aujourd’hui nous allons rédiger un post afin d’envoyer quelques données à notre API REST.
Tout d’abord, dans notre service, nous allons créer une méthode HTTP en utilisant HttpClient.
Nous allons insérer le code ci-dessous pour communiquer avec l’URL souhaitée.
//POST ENVIA DADOS PARA API
post(produtos: any){
return this.http.post('http://localhost:3000/produtos/', produtos)
}Notez que cette URL contiendra l’adresse http://localhost:3000/produtos/ fournie par l’API REST fictive de json-server.
Maintenant dans notre component.ts, nous allons ajouter les fonctions suivantes.
Pour que notre post fonctionne, il faut d’abord initialiser un formulaire, nous allons créer une variable appelée novoProdutoForm.
public novoProdutoForm: FormGroup | nenhum;
Ensuite, nous créerons la fonction appelée initForm.
//INICIA FORMULARIO
initForm() {
this.novoProdutoForm = this.formBuilder.group({
nome: [''],
descricao: [''],
id: new FormControl(0),
})
}Nous appellerons également initForm dans ngOnInit.
Maintenant, nous allons créer une fonction pour envoyer les données remplies du formulaire vers l’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 ();
}J’ai ajouté une fonction pour nettoyer le formulaire après l’envoi des données vers l’API.
//LIMPAR FORMULARIO //COMPONENT.TS
limparCampos() {
isso . getLista ();
isso . initForm ();
}Maintenant dans notre composant HTML.
< form [ formGroup ]= "novoProdutoForm" >
< div class = "mb-3" >
< label for = "exampleFormControlInput1" class = "form-label" > < h4 > Nouveau Produit / Éditer Produit < / h4 > </ label >
< input formControlName = "nome" type = "text" class = "form-control" id = "exemploFormControlInput1"
placeholder = "Entrez le nom du produit..." >
</ div >
< div class = "mb-3" >
< label for = "exampleFormControlTextarea1" class = "form-label" > < h6 > Description du produit < / h6 > </ label >
< textarea formControlName = " descricao " class = "form-control" id = "exemploFormControlTextarea1"
linhas = "3" > </ textarea >
</ div >
<div >
< bouton class = "btn btn-success" ( clique )= "enviar()" > Enregistrer </ bouton >
</ div >
</ form >Dès que nous remplissons, notre écran ressemblera à ceci.
Et ainsi, notre post fonctionnera parfaitement.
