Mapping two objects in Angular 7 Typescript

Question

I have a Reactive form in Angular for user registration. The setup of the reactive form means that the form data object

is different from my viewmodel object

export interface RegisterViewModel {
UserName: string;
Email: string;
Password: string;
ConfirmPassword: string; }

To be explicit, in the form object, the two password properties are nested in a seprate 'matching_passwords' object.

My form object is captured in the onSubmit(value) method

  onSubmit(value) {
this.accountService.register(value)
.pipe(first())
.subscribe(
  data => {
    console.log('successful registration');
    this.router.navigate(['/login']);
  },
  error => {
    console.log('unsuccessful registration');
  }); }

which passes the value to the service method which expects the RegisterViewModel object.

  register(viewModel: RegisterViewModel) {
    return this.http.post<any>('api/Account/Register', viewModel, httpOptions)
      .pipe(map(data => {
        return data;
      }));
  }

Without changing my form structure so that is perfectly matches the RegisterViewModel structure, how do I map these different objects to one another?

How can I pass the form model to the register method, register(viewModel: RegisterViewModel)? I want my RegisterViewModel to recieve the email, username, password and passwordconfirm strings from my form.

I'd like to help but I'm not sure I understood what you mean by mapping them to one other. Could u provide an example of the result you rr aiming fir — Robdll
– Robdll, Commented Mar 9, 2019 at 16:10
@Koop4 How can I pass the form model to the register method: register(viewModel: RegisterViewModel), which accepts the diffrent RegisterViewModel object? I want my RegisterViewModel to recieve the email, username, password and passwordconfirm strings from my form. — Winthorpe
– Winthorpe, Commented Mar 9, 2019 at 16:16

Qortex · Accepted Answer · 2019-03-09 16:29:16Z

1

You can simply build the object from the form values. Based on your picture, that would look like:

// say your form value object is `form_values` (instead of `value` in your code)
const viewModelObject = <RegisterViewModel> {
  UserName: form_values.userName,
  Email: form_values.email,
  Password: form_values.matching_passwords.password,
  ConfirmPassword: form_values.matching_passwords.confirmPassword
};

Then you call

this.accountService.register(viewModelObject)
// ... following stays the same

answered Mar 9, 2019 at 16:29

Qortex

7,5124 gold badges46 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Mapping two objects in Angular 7 Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related