Recently, I began learning Angular and encountered a simple issue. I am trying to utilize FormGroup to store data in the service, but the problem arises when the received data from FormGroup does not have the correct interface format. Below is an excerpt of my code:
client.components.ts
addClientForm = new FormGroup({
name: new FormControl('')
});
onSubmit(){
console.warn(this.addClientForm.value);
this.clientService.addClient({ this.addClientForm.value } as Client)
.subscribe(client => {
this.clientService.add(client);
});
}
client.components.html
<form [formGroup]="addClientForm" (ngSubmit)="onSubmit()">
<label for="first-name">Name: </label>
<input id="first-name" type="text" formControlName="name">
<button type="submit">Submit</button>
</form>
client.service.ts
addClient(client: Client): Observable<Client> {
return this.http.post<Client>(this.clientsURL, client, this.httpOptions).pipe(
tap((newClient: Client) => console.log(newClient)),
catchError(this.handleError<Client>('addedClient'))
);
}
add(client: Client){
this.clients.push(client);
}
clients.ts
export interface Client {
id: number,
name: string,
}
In order to address this issue, does anyone have any suggestions or solutions?