Used in https://stackblitz.com/edit/monolithic-reactive-form

app.component.html

<div class="mat-typography">
  <h1>Checkout Order</h1>

  <div class="checkout-form">
    <form novalidate [formGroup]="checkoutForm">
      <mat-form-field>
        <input matInput type="text" placeholder='Full name' formControlName="fullName">
      </mat-form-field>

      <mat-tab-group>
        <mat-tab label="Billing">
          <billing-form (formReady)="formInitialized('billing', $event)"></billing-form>
        </mat-tab>
        <mat-tab label="Shipping">
          <shipping-form (formReady)="formInitialized('shipping', $event)"></shipping-form>
        </mat-tab>
      </mat-tab-group>
    </form>
  </div>

<h2 class='mat-h2'>Form Value</h2>
  <pre>
    {{checkoutForm.value | json}}
  </pre>
</div>