When performing a POST request, we often create something similar to:
const userData = this.userForm.value;
Imagine you have the following template:
<input type="text" id="userName" formControlName="userName">
<input type="email" id="userEmail" formControlName="userEmail">
<select id="userTypeId" formControlName="userTypeId">
<option *ngFor="let userType of userTypes" [value]="userType.id">{{userType.name}}</option>
</select>
In your userData, the values will be:
{
userName: 'foo',
userEmail: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40262f2f002221326e232f2d">[email protected]</a>',
userTypeId: '1'
}
However, your API expects:
{
userName: string,
userEmail: string,
userType: UserType
}
where UserType is defined as:
{
id: string,
name: string,
}
To accommodate the API's model, you would need to structure it like:
const userForAPI = {
userName: userData.userName,
userEmail: userData.userEmail,
userType: { id: userData.userTypeId }
}
Then you would call:
this.userService.createUser(userForAPI)Is there an alternative solution that doesn't involve specifying { id: userData.userTypeId }? Can the template be modeled based on the API's requirements so that this.userForm.value can be directly sent to the API?