フォームを複数のコンポーネントに分割する際の問題

Question

私はangular4プロジェクトに取り組んでいます。このプロジェクトでは、フォームをさまざまなコンポーネントに分割しようとすると、いくつかの問題に直面しました。私は詳細に説明します。

<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> 

すべて：HTML以下の第二成分（CustomerSelection）において

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

：TSファイルのコード次のこのフォームの

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

：私は、フォームを以下ています最初はうまくいきますが、2番目のcompでフォームフィールドの値を変更しようとするとon30のようなエラーがあります：

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

この問題について知っている人は、私を助けてください。前もって感謝します。

Answer 1

あなたはコンストラクタに

private cd: ChangeDetectorRef 

を追加し、（

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