Creating a Reactive form for user registration in Angular involves setting up the form data object separately from the viewmodel object.
https://i.sstatic.net/ERlYa.png
export interface RegisterViewModel {
UserName: string;
Email: string;
Password: string;
ConfirmPassword: string; }
To clarify, in the form object, the password properties are nested within a separate 'matching_passwords' object.
The onSubmit(value) method captures the form object.
onSubmit(value) {
this.accountService.register(value)
.pipe(first())
.subscribe(
data => {
console.log('successful registration');
this.router.navigate(['/login']);
},
error => {
console.log('unsuccessful registration');
}); }
This method passes the value to the service, which expects the RegisterViewModel object.
register(viewModel: RegisterViewModel) {
return this.http.post<any>('api/Account/Register', viewModel, httpOptions)
.pipe(map(data => {
return data;
}));
}
How do I map these different objects without changing the form structure to perfectly match the RegisterViewModel?
What is the best way to pass the form model values to the register method, register(viewModel: RegisterViewModel), ensuring that the RegisterViewModel receives all necessary fields?