title: Mapping two objects in Angular 7 Typescript
body: <p>I have a Reactive form in Angular for user registration.  The setup of the reactive form means that the form data object </p>
  
  <p><a href="https://i.stack.imgur.com/ERlYa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ERlYa.png" alt="enter image description here"></a></p>
  
  <p>is different from my viewmodel object</p>
  
  <pre><code>export interface RegisterViewModel {
  UserName: string;
  Email: string;
  Password: string;
  ConfirmPassword: string; }
  </code></pre>
  
  <p>To be explicit, <strong>in the form object</strong>, the two password properties are nested in a seprate 'matching_passwords' object.</p>
  
  <p>My form object is captured in the onSubmit(value) method</p>
  
  <pre><code>  onSubmit(value) {
  this.accountService.register(value)
  .pipe(first())
  .subscribe(
    data =&gt; {
      console.log('successful registration');
      this.router.navigate(['/login']);
    },
    error =&gt; {
      console.log('unsuccessful registration');
    }); }
  </code></pre>
  
  <p>which passes the value to the service method which expects the RegisterViewModel object.</p>
  
  <pre><code>  register(viewModel: RegisterViewModel) {
      return this.http.post&lt;any&gt;('api/Account/Register', viewModel, httpOptions)
        .pipe(map(data =&gt; {
          return data;
        }));
    }
  </code></pre>
  
  <p>Without changing my form structure so that is perfectly matches the RegisterViewModel structure, how do I map these different objects to one another?</p>
  
  <p>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.</p>