post method from API express & angular 10

Question

I'm trying to do a post method with angular and express.js to do that I created a file called index.js where I added different method but in my front end in Angular I would like to simply add data, how to do with reactive forms ? I followed several tutorials but I did my best

thank you.

index.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
const parkings = require('../parkings.json');

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

app.use(express.json());

// Get all parkings details
app.get('/parkings', (req, res) => {
    res.status(200).json(parkings)
});

// Get parkings by id
app.get('/parkings/:id', (req, res) => {
    const id = parseInt(req.params.id)
    const parking = parkings.find(parking => parking.id === id)
    res.status(200).json(parking)
});
// post
app.post('/parkings', (req, res) => {
    parkings.push(req.body)
    res.status(200).json(parkings)
})

app.listen(3000, () => {
    console.log("Listening to port 3000");
})

service

url: string = ('http://localhost:3000');
  
  parkingForm = new FormGroup({
    name: new FormControl(),
    type: new FormControl(),
    city: new FormControl()
  });

  array: any [];

  constructor(private http: HttpClient) { }

  get(): Observable<any> {
    return this.http.get<any>(`${this.url}/parkings`);
  }

  postMethod() {
    let myFormData = new FormData();
    myFormData.append('name', this.parkingForm.value.name);
    myFormData.append('type', this.parkingForm.value.type);
    myFormData.append('city', this.parkingForm.value.city);

    return this.http.post(this.url, myFormData,
      { responseType: 'text' }).subscribe(
        (response) => this.array.push(response),
        (error) => console.log(error)
      );
  }

ts.file

 export class AppComponent implements OnInit {
  getTab: any = [];

  constructor(private parkingsService: ParkingsService) {}

  ngOnInit() {
    this.parkingsService.get().subscribe(data => {
      this.getTab = data;
    })
  };

  add() {
    this.parkingsService.postMethod();
  }
}

html

<table>
  <tr>
    <th>name</th>
    <th>type</th>
    <th>ville</th>
  </tr>
  <tr *ngFor="let parking of getTab">
    <td>{{parking.name}}</td>
    <td>{{parking.type}}</td>
    <td>{{parking.city}}</td>
  </tr>
</table>

<form [formGroup]="parkingForm">
  <div class="form-group">
    <input type="text" placeholder="enter name" name="name" formControlName="name"><br>
    <input type="text" placeholder="enter type" name="type" formControlName="type"><br>
    <input type="text" placeholder="enter city" name="city" formControlName="city"><br>
    <button (click)="add()">Ajouter</button>
  </div>
</form>

Answer 1

parkingForm: FormGroup;
this.parkingForm = this.formBuilder.group({
    name: ['', [Validators.required]],
    type: ['', [Validators.required]],
    city: ['', [Validators.required]]
});



constructor(private formBuilder: FormBuilder) { }

ngOnInit(){

}

add() {
    let bodyJSON={
        name:this.parkingForm.get('name').value,
        type:this.parkingForm.get('type').value,
        city:this.parkingForm.get('city').value
    }
    this.parkingsService.postMethod(bodyJSON);
}


postMethod(data) {
let myFormData = new FormData();
myFormData.append('name', data.name);
myFormData.append('type', data.type);
myFormData.append('city', data.city);

return this.http.post(this.url, myFormData,
  { responseType: 'text' }).subscribe(
    (response) => this.array.push(response),
    (error) => console.log(error)
  );

}