I am facing an issue with my FormGroup and FormControl.
this.userForm = new FormGroup({
id: new FormControl(this.user.id),
firstName: new FormControl(this.user.firstName),
lastName: new FormControl(this.user.lastName),
email: new FormControl(this.user.email),
password: new FormControl(""),
userRole: new FormControl(this.user.userRole)
});
The this.user.userRole is a numerical value that corresponds to a C# enum.
When I submit the form as it is, everything works correctly, and the backend receives the appropriate data with the correct enum value.
However, if I change the value of the userRole FormControl using:
changeRole(e) {
this.userForm.get('userRole').setValue(parseInt(e.target.value), {
onlySelf: true
});
}
This method is triggered by a change event on a dropdown select.
The problem arises when I submit the form after changing the userRole value. The numeric value gets converted to a string. This discrepancy can be seen in Chrome's network tab (initially reads userRole: 10, but changes to userRole: "10").
Here is how the submission is done to the controller:
onSubmit() {
this.userService.save(this.userForm.value as User).subscribe(r => {
this._bsModalRef.hide();
});
}
//the service's method....
save(user: User): Observable<any> {
let url = "/user/save";
return this.http.post(url, user);
}
Additionally, here is the structure of the User class:
export class User {
id: number;
firstName: string;
lastName: string;
email: string;
userRoleDisplay: string;
userRole: number;
lastLogin: string;
password: string
}
Any suggestions on how to address this?