Two way data binding in model driven forms
<p>I have a reactive form, in which, i have a first name, a last name and finally display name textbox. When i give first name and last name, the value of the display name textbox should contains first name and second name concatenated. But as i'm still in learning stage, couldn't able to figure out what is wrong with this code. Any advice would be helpful. Thank you.</p>

<p><strong>Here is my code</strong> </p>

<pre><code>  &lt;form [formGroup]="myForm" novalidate (ngSubmit)="save(myForm.value, myForm.valid)"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for=""&gt;First Name&lt;/label&gt;
      &lt;input type="text" class="form-control" formControlName="firstname" [(ngModel)]="firstname"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for=""&gt;Last Name&lt;/label&gt;
      &lt;input type="text" class="form-control" formControlName="lastname" [(ngModel)]="secondnamename"&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for=""&gt;Display Name&lt;/label&gt;
      &lt;input type="text" class="form-control" formControlName="displayname" value='{{firstname}}{{lastname}}'&gt;
    &lt;/div&gt;
    &lt;div class="margin-20"&gt;
      &lt;div&gt;myForm details:-&lt;/div&gt;
      &lt;pre&gt;myForm value: &lt;br&gt;{{myForm.value | json}}&lt;/pre&gt;
    &lt;/div&gt;
  &lt;/form&gt;
</code></pre>

<p><a href="https://plnkr.co/edit/M0ndNI?p=preview" rel="nofollow noreferrer">Here is my plnkr</a></p>

<p>Gif:</p>

<p><a href="https://i.stack.imgur.com/n4KxG.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/n4KxG.gif" alt="enter image description here"></a></p>