<div class="container">
 <div class="left-column">
 <mat-card class="card">
 <mat-card-header class="card__title">
 <mat-card-title>Transferencia Bancariamat-card-title>
 mat-card-header>

 <mat-card-content>
 <form class="form" [formGroup]="formGroup" (ngSubmit)="submitTransfer()">
 <div formGroupName="beneficiaryInfo">
 <mat-form-field appearance="outline">
 <mat-label>Nombre del beneficiariomat-label>
 <input matInput formControlName="beneficiaryName">
 mat-form-field>

 <mat-form-field appearance="outline">
 <mat-label>Número de cuenta del beneficiariomat-label>
 <input matInput formControlName="accountNumber">
 mat-form-field>
 div>

 <mat-form-field appearance="outline">
 <mat-label>Monto a transferirmat-label>
 <input matInput type="number" formControlName="amount">
 mat-form-field>

 <button mat-raised-button color="primary" type="submit" [disabled]="formGroup.invalid">
 Realizar Transferencia
 button>
 form>
 mat-card-content>
 mat-card>
 div>

 <div class="right-column">
 <h2 class="json-title">Datos del Formulario (Live)h2>
 <div>
 <strong>Nombre del Beneficiario:strong>
 {{ formGroup.get('beneficiaryInfo.beneficiaryName')?.value }}
 div>
 <code class="json-data">{{ formGroup.value | json }}code>
 div>
div>