title: Angular/TypeScript - http post using a custom class' toString()
body: <p>I am using Angular Reactive forms, I am getting <code>form.value</code> and sending it to asp.net web-api. The object named <code>len</code> in the code snipped below is a custom class that I wrote that is a very simple version of <code>TimeSpan</code>.</p>
  
  <p>Here is my request;</p>
  
  <pre><code>{
    "id": "a7b06cf9-36a5-4c7a-99e5-8b9661469329",
    "minCapacity": 5,
    "maxCapacity": 10,
    "len": {
      "Days": 0,
      "Hours": 2,
      "Minutes": 0
    },
  }
  </code></pre>
  
  <p>By default <code>.NET TimeSpan</code> requires an input like this:</p>
  
  <blockquote>
    <p><code>string.Format("{0}.{1}:{2}:{3}", len.Days, len.Hours, len.Minutes, len.Seconds)</code></p>
  </blockquote>
  
  <p>And otherwise grabs the variable <code>len</code> as null.</p>
  
  <p>Therefore, I have implemented an override <code>toString()</code> to my custom <code>TimeSpan</code> class. Yet when using the HTTP class in my <code>Typescript</code> code I still get the object in JSON format. </p>
  
  <p>I have fiddled around SO for a couple hours, as well as google, yet I have failed to find an answer. I am hoping this is not a duplicate</p>
  
  <p>Is there a way to override this at <code>client side</code>?</p>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>saveItem(model: Room) {
      let selected = this.selected;
      this.roomService.createUpdateRoom(model).subscribe(
          response =&gt; {
              Helpers.setLoading(false);
              var result = response as ServiceResult&lt;any&gt;;
              if (result.hasError) {
                  this.toaster.error(result.message, 'Error');
              }
              else {
                  alert('ok');
                  this.viewForm();
              }
          },
          error =&gt; {
              this.toaster.error(error.message, 'Error');
          });
  }
  </code></pre>
  
  <p><strong>service.ts</strong></p>
  
  <pre><code>createUpdateRoom(request) {
      return this.post('api/v1.0/room/createupdate', true, request);
  }
  </code></pre>
  
  <p><strong>base.service.ts</strong></p>
  
  <pre><code>post(apiAddress: string, isAuthorizeRequest: boolean, parameter: any): Observable&lt;any&gt; {
          return this.intercept(this.injector.get(AuthHttp).post(this.baseUrl + apiAddress, parameter).map(
              (response) =&gt; {
                  let data = response.json();
                  if (data) {
                      httpSuccess = data;
                  }
                  return httpSuccess;
              }
          ));
      }
  </code></pre>
  
  <p><strong>timespan.ts</strong></p>
  
  <pre><code>export class TimeSpan {
  day: number = 0;
  hour: number = 0;
  minute: number = 0;
  
  toTimeString(): string {
      return this.hour +':' + this.minute;
  }
  
  toString = (): string =&gt; {
  
      return this.day + ':' + this.toTimeString() + ':00';
  }
  }
  </code></pre>
  
  <p><strong>room.ts</strong></p>
  
  <pre><code>export class Room {
      id: string;
      minCapacity: number;
      maxCapacity: number;
      len: TimeSpan;
  }
  </code></pre>