Issues in dividing a form into multiple components

Question

I am working on angular4 project. In this project, I have faced some issues when I try to divide a form into different components. I will explain in details. I have following form:

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

For this form following code in ts file:

  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)]]
  });

In the second component (CustomerSelection) following 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: example@xyz.com" [(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'.

If anyone know about this issue, please help me out. thanks in advance.

Answer 1

To solve ExpressionChangedAfterItHasBeenCheckedError error you need to do something like this

add into constructor

private cd: ChangeDetectorRef

and use in

ngAfterViewInit() {
        this.cd.detectChanges();
    }