Проблемы с разделением формы на несколько компонентов

Я работаю над проектом angular4. В этом проекте я столкнулся с некоторыми проблемами, когда пытался разделить форму на разные компоненты. Я объясню в деталях. У меня есть следующая форма:

<form [formGroup] = "BookingFormOne" (ngSubmit) = "submitBookingFormOne()">
    <CustomerSelection [customerInfo]="BookingFormOne"></CustomerSelection>
</form>

Для этой формы следующий код в файле ts:

  this.BookingFormOne = this.formBuilder.group({
     customer_type         : ["new customer"],
     first_name            : [null, [Validators.required, Validators.pattern(this.regExpression)]],
     last_name             : [null, [Validators.pattern(this.regExpression)]],
     email_id              : [null, [Validators.required, Validators.pattern(this.emailRegExpression)]]
  });

Во втором компоненте (CustomerSelection) следующий html:

<div [formGroup]="customerInfo">
  <div>
      <input type="radio" #new_customer name="customer_type" value="new customer" formControlName="customer_type" (change)="onCustomerTypeChange($event)"> 
  New Customer
      <input type="radio" #existing_customer name="customer_type" value="existing customer" formControlName="customer_type" (change)="onCustomerTypeChange($event)"> Existing customer
   </div>
  <div [hidden]="existing_customer?.checked" >
     <div>
        <div>
            <label>First Name</label>
            <div>
                <input placeholder="Ex: James" [(ngModel)]= "existingCustomerFilter.firstName" formControlName="first_name">
            </div>
        </div>
     </div>
  <div>
     <div>
        <label>Last Name</label>
        <div>
           <input placeholder="Ex: Lee" [(ngModel)]= "existingCustomerFilter.lastName" formControlName="last_name">
        </div>
     </div>
  </div>
  <div class="customer-field">
     <div>
        <label>Email Address</label>
        <div>
           <input placeholder="Ex: [email protected]" [(ngModel)]= "existingCustomerFilter.email" formControlName="email_id" (focusin)="emailExist = false" (focusout)="checkEmailExistance($event)">
        </div>
     </div>
  </div>
   </div>
   <div *ngIf="existing_customer?.checked">
      <div class="existingCustomer">
          <label>Select Customer</label>
          <SearchAutoComplete [data]="existingCustomerDetails" (onKeyup)="searchCustomers($event)" (getResult)="getSelectedCustomers($event)"></SearchAutoComplete>
      </div>
   </div>

Everything is works fine on first time, But when I try to change the value of form fields in second component there is error like:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

Если кто-то знает об этой проблеме, пожалуйста, помогите мне. заранее спасибо.