Post method for submitting a form on api

Question

There is a form on angular 8

my-form.component.html

<div class="container">
<form novalidate [formGroup]="registrationForm">
    <div class="form-group">
        <label for="firstName">Имя:</label>
        <input #spy required pattern=[A-Za-zА-Яа-яЁё]{2,} name="firstName" id="firstName" type="text" class="form-control" formControlName="firstName">
    </div>
    <div class="form-group">
        <label for="lastName">Фамилия:</label>
        <input #spy required pattern=[A-Za-zА-Яа-яЁё]{2,} name="lastName" id="lastName" type="text" class="form-control" formControlName="lastName">
    </div>
    <div class="form-group">
        <label for="email">E-mail:</label>
        <input #spy required email name="email" id="email" type="email" class="form-control" formControlName="email">
    </div>
    <!--{{ spy.className }}-->
    <button type="submit" class="btn btn-succes" (click)="submit(myForm)">Отправить</button>
</form>

When the user writes data, the submit button should send data to the API using the POST method. If you need any code, leave a comment

ts code:

import { FormGroup, FormControl } from '@angular/forms';
import {HttpClient} from '@angular/common/http';

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

  registrationForm: FormGroup;

  constructor() { }

  ngOnInit() {
    this.registrationForm = new FormGroup({
      firstName: new FormControl(),
      lastName: new FormControl(),
      email: new FormControl()
    });
  }

}```

Answer 1

i have simple example for you....

reference

----html----

<header class="masthead">
   <div class="container h-100">
       <div class="row h-100 align-items-center justify-content-center">
           <div class="col-6">
               <div class="text-center">
                   <hello name="{{ name }}"></hello>
                    <hr>
            </div>
            <form #send="ngForm" (ngSubmit)="sendFRMData(send.value)">
                <div class="form-group">
                    <label for="title" class="text-muted">Title</label>
                <input type="text" class="form-control" id="title" 
name="titlefrm" ngModel #title='ngModel' required>
      <span class="help-block text-danger" *ngIf="!title.valid && 
title.touched">Please give Title!!</span>
      </div>
      <div class="form-group">
                    <label for="body" class="text-muted">Body</label>
<input type="text" class="form-control" id="body" name="bodyfrm" ngModel 
#body='ngModel' required>
<span class="help-block text-danger" *ngIf="!body.valid && 
body.touched">Please 
give Body!!</span>
      </div>
      <div class="form-group">
                    <label for="userId" class="text-muted">UserID</label>
<input type="text" class="form-control" id="userId" name="userIdfrm" ngModel 
#userid='ngModel' required>
<span class="help-block text-danger" *ngIf="!userid.valid && 
userid.touched">Please give UserID!!</span>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <input class="form-control btn btn-success" type="submit" 
[disabled]='!send.valid'>
        </div>
        <div class="col-sm-6">
          <input class="form-control btn btn-info" type="button" value="EDIT" 
(click) = 'onEdit()'>
        </div>
      </div>
</form>
        </div>
</div>
</div>
</header>

----ts----
import { NgForm } from '@angular/forms';
@ViewChild('send') send: NgForm;
constructor(private sendData: HttpService) {
  }
sendFRMData(data: any) {
const payload = {
  title: data.titlefrm,
  body: data.bodyfrm,
  userId: data.userIdfrm
}
this.sendData.try(payload).subscribe(
  (data: any) => {
    this.respondedData = JSON.stringify(data);
    this.alert = true;
  }
);
}

----service----

try(data){ 
return 
this.http.post('https://jsonplaceholder.typicode.com/posts',data,{
headers: {
    "Content-type": "application/json; charset=UTF-8"
       }
   });
}

hope you get your answer...

Answer 2

Seems like you are not able to get form values in your submit function. change your click event from (click)="submit(myForm)" to (click)="submit(myForm.value)" then in your submit function you can call post method

submit(formValueObject) {
    console.log(formValueObject);
    this.httpService.post(url, formValueObject).subscribe((res:any)=> {
      //your response
    })
  }

I hope it helps