FormGroup을 여러 구성 요소에 전달

Question

난각 2+ 응용 프로그램에서 반응 양식을 사용하고 있으며 FormGroup의 여러 부분이 여러 구성 요소에 전달되도록해야합니다. 머리글, 바닥 글 등을 별도의 구성 요소로 관리하고 해당 구성 요소로 채울 수 있습니다. 이에

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

:이이 코드에 경고/오류가 표시 할 올바른 접근 사촌 인 경우,

<div class="container-fluid"> 
    <form [formGroup]="orderForm"> 
    <order-header [orderForm]="orderForm"></order-header> 
    <order-items [orderForm]="orderForm"></order-items> 
    <order-footer [orderForm]="orderForm"></order-footer> 
    </form> 
</div> 

궁금 오전 : 이것은 내가 순간에, 그 일을하고 어떻게 라인 :

<form [formGroup]="orderForm">

어떤 제안이? 감사.

Answer 1

줄리아가 언급했듯이 이것은 정상적인 동작입니다. 실제로이를 일으키는 당신의 구성 요소에 @Input의

이 아닌 라인 <form [formGroup]="orderForm">

이 dev에 모드에서 발생합니다. 이 문제를 해결하는 방법은 orderForm을받는 구성 요소에서 수동으로 변경 감지를 트리거하는 것입니다. 당신이 @Input을 사용하고 있기 때문에, 당신은 당신의 다른 구성 요소에 ngOnChanges 수명주기 후크를 사용할 수 있습니다

import { ChangeDetectorRef } from '@angular/core'; 

@Input() orderForm: FormGroup 

constructor(private ref: ChangeDetectorRef) { } 

ngOnChanges() { 
    this.ref.detectChanges() 
} 

확인을 더 여기 오류에 대한 : Expression ___ has changed after it was checked

또한, (!) 참고로, 당신이 정말로 통과해야합니까 귀하의 다른 구성 요소에 완전한 양식. 보통 다음과 같이 중첩 된 그룹을 전달합니다.

<form [formGroup]="orderForm"> 
    <order-header [orderForm]="orderForm.controls.myNestedGroupName"></order-header> 
</form> 

그냥 부연 설명! :)

Answer 2

제대로하고 있습니다. Angular in dev 모드는 두 가지 변경 감지주기를 수행합니다. 하나는 정상이고 두 번째는 모든 호출 된 함수가 첫 번째와 두 번째 시간이 동일한 결과를 반환하는지 확인하는 것입니다. 템플릿에서 호출 한 모든 @Input 또는 함수가 값을 렌더링하기 위해 값을 변경하지 않는지 확인하십시오.

예를 들어 long() 함수가 항상 다른 값을 반환하기 때문에이 구성 요소는이 예외를 throw합니다.

@Component({ 
    selector: 'my-app', 
    template: ` 
     {{long()}} 
    `, 
}) 
export class App { 
    name:string; 
    i=0; 

    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 

    long(){ 
    return this.i++; 
    } 
}