post method from API express & angular 10 - node.js

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)
);
}