title: How to create calculated field in angular reactive forms?
body: <p>I have created a form in my application.</p>
  
  <pre><code>  mapForm = this.fb.group({
      name: ['', Validators.required],
      view: this.fb.group({
        width: ['', Validators.required],
        height: ['', Validators.required]
      })
    });
  </code></pre>
  
  <p>In this form, I am creating a JSON like following:</p>
  
  <pre><code>  {
      name: "x", 
      view:{ 
          width: "100%", 
          height: "100%" 
      } 
    }
  </code></pre>
  
  <p>So my form is:</p>
  
  <pre><code>&lt;form [formGroup]="myForm" (ngSubmit)="onSubmit()"&gt;
    &lt;label&gt;
      First Name:
      &lt;input type="text" formControlName="firstName" required&gt;
    &lt;/label&gt;
  
     &lt;div formGroupName="view"&gt;
      &lt;h3&gt;View&lt;/h3&gt;
  
          &lt;label&gt;
            width:
            &lt;input type="text" formControlName="width"&gt;
          &lt;/label&gt;
  
          &lt;label&gt;
            height:
            &lt;input type="text" formControlName="height"&gt;
          &lt;/label&gt;
      &lt;/div&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>But I want to seperate my view's width/height value (100) and unit (%) properties two input elements and join them in json.</p>
  
  <pre><code>    &lt;label&gt;
        width:
        &lt;input type="text" formControlName="height" value="100"&gt;
      &lt;/label&gt;
      &lt;label&gt;
        unit:
        &lt;input type="text" formControlName="unit" value="%"&gt;
      &lt;/label&gt;
  </code></pre>
  
  <p>But my view.width will be "100%". How can I do it?</p>