title: Angular 2 submit JSON within JSON
body: <p>I am trying to use an import function where a user can import raw JSON and then it posts to the server.</p>
  
  <p>for example if a user pastes this json:</p>
  
  <pre><code>{
    "name": "testing",
    "design": [
      {
        "name": "test",
        "comments": [
          {
            "short": "123",
            "long": "1234567890"
          }
        ],
        "maxMark": 0
      }
    ]
  }
  </code></pre>
  
  <p>Then i want all of that to get sent the server.
  Not sure the best of way handling such a task though.</p>
  
  <p>Right now i have a simple form:</p>
  
  <pre><code>&lt;modal #importModal [keyboard]="false" [backdrop]="'static'"&gt;
                          &lt;modal-header [show-close]="false"&gt;
                              &lt;h4 class="modal-title"&gt;Importing a module&lt;/h4&gt;
                          &lt;/modal-header&gt;
                          &lt;modal-body&gt;
                              &lt;form name="importForm" [ngFormModel]="importForm" (ngSubmit)="importForm.valid" novalidate&gt;
                                  &lt;textarea class="form-control" rows="20" #data='ngForm' [ngFormControl]="importForm.controls['data']"&gt;&lt;/textarea&gt;
                              &lt;/form&gt;
                              &lt;pre&gt;{{importForm.value | json }}&lt;/pre&gt;
                          &lt;/modal-body&gt;
                          &lt;modal-footer&gt;
                              &lt;button type="button" class="btn btn-danger" (click)="importModal.dismiss()"&gt;&lt;i class="fa fa-close"&gt;&lt;/i&gt; Close&lt;/button&gt;
                              &lt;button type="button" class="btn btn-primary" type="submit" [disabled]="!importForm.valid" (click)="importModal.dismiss() &amp;&amp; submitImport(importForm.value)"&gt;&lt;i class="fa fa-floppy-o"&gt;&lt;/i&gt; Submit&lt;/button&gt;
                          &lt;/modal-footer&gt;
                      &lt;/modal&gt;
  </code></pre>
  
  <p>But the value of the form is showing as:</p>
  
  <pre><code>  "data": "{\n  \"name\": \"testing\",\n  \"design\": [\n    {\n      \"name\": \"test\",\n      \"comments\": [\n        {\n          \"short\": \"123\",\n          \"long\": \"1234567890\"\n        }\n      ],\n      \"maxMark\": 0\n    }\n  ]\n}"
  </code></pre>
  
  <p>Do i have to stringify it then strip it or ? What's the best of converting that back into JSON?</p>