title: Mapping FormGroup to Interface
body: <p>I started learn Angular and I have a simple problem. So, I want to use FormGroup and store data in the service. Problem is that receive data from FormGroup hasn't format of interface. Look at my code:</p>
  <p>client.components.ts</p>
  <pre><code>  addClientForm = new FormGroup({
      name: new FormControl('')
    });
  
    onSubmit(){
      console.warn(this.addClientForm.value);
      this.clientService.addClient({ this.addClientForm.value } as Client)
        .subscribe(client =&gt; {
          this.clientService.add(client);
        });
    }
  </code></pre>
  <p>client.components.html</p>
  <pre><code>&lt;form [formGroup]=&quot;addClientForm&quot; (ngSubmit)=&quot;onSubmit()&quot;&gt;
  
    &lt;label for=&quot;first-name&quot;&gt;Name: &lt;/label&gt;
    &lt;input id=&quot;first-name&quot; type=&quot;text&quot; formControlName=&quot;name&quot;&gt;
  
    &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>client.service.ts</p>
  <pre><code>  addClient(client: Client): Observable&lt;Client&gt; {
      return this.http.post&lt;Client&gt;(this.clientsURL, client, this.httpOptions).pipe(
        tap((newClient: Client) =&gt; console.log(newClient)),
        catchError(this.handleError&lt;Client&gt;('addedClient'))
      );
  
    }
  
    add(client: Client){
      this.clients.push(client);
    }
  </code></pre>
  <p>clients.ts</p>
  <pre><code>export interface Client {
    id: number,
    name: string,
  }
  </code></pre>
  <p>How can I solve my problem?</p>