Enlace de datos bidireccional en formularios controlados por modelos

Tengo un formulario reactivo, en el que tengo un nombre, un apellido y, finalmente, mostrar el cuadro de texto del nombre. Cuando doy el nombre y el apellido, el valor del cuadro de texto del nombre para mostrar debe contener el nombre y el segundo nombre concatenados. Pero como todavía estoy en la etapa de aprendizaje, no pude descubrir qué está mal con este código. Cualquier consejo sería útil. Gracias.

Aquí está mi código

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

Aquí está mi plnkr

GIF:

Solución del problema

También puede adoptar el enfoque más "reactivo" y escuchar cambios de la forma como:

 this.myForm.valueChanges.subscribe((form) => {
 this.displayname = `${form.firstname} ${form.secondname}`;
 });

Luego, incluso puede deshacerse del enlace de datos bidireccional innecesario (y el estado local correspondiente) que usa para firstnamey secondnameasí. Ver Plunker: https://plnkr.co/edit/h5aFRDTWfj0gQ69CvVK7?p=preview