Angular2：ネストされたフォームグループ

Question

私はこのフォームを作成しました：

this.cardForm = this.fb.group({ 
    number: ['', Validators.compose([Validators.required, this.validateCardNumber])], 
    holderName: ['', Validators.required], 
    expiry: this.fb.group({ 
     expirationMonth: ['', Validators.required], 
     expirationYear: ['', Validators.required], 
    }), 

あなたが見ることができるように、私はexpiryという名前のネストされたフォーム・グループを作成しました。私のテンプレートに：

<form [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()"> 
    <div class="form-group"> 
    <label for="cardnumber">Card number</label> 
    <input 
     type="text" 
     formControlName="number" 
     placeholder="Card number" 
     name="cardnumber" 
     class="input-transparent form-control"> 
    </div> 
    ... 
    <div class="form-group" formGroupName="expiry"> 
    <label for="expirationmonth">Expiration month</label> 
    <select2 id="default-select" 
     name="expirationmonth" 
     [data]="months$ | async" 
     [width]="250" 
     [options]="select2Options"> 
    </select2> 

    <label for="expirationyear">Expiration year</label> 
    <select2 id="default-select2" 
     name="expirationyear" 
     [data]="years$ | async" 
     [width]="250" 
     [options]="select2Options"> 
    </select2> 
    </div> 

私はこのエラーを取得しています：

ERROR Error: formGroup expects a FormGroup instance. Please pass one in. 

    Example: 


<div [formGroup]="myGroup"> 
    <input formControlName="firstName"> 
</div> 

In your class: 

this.myGroup = new FormGroup({ 
    firstName: new FormControl() 
}); 

任意のアイデア？

Answer 1

this.cardFormがコンポーネント側で設定される前に、ビューが読み込まれています。

は*ngIfを配置しようとすると：

<form *ngIf="cardForm" [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()"> 

それとも*ngIfとdivの中にカプセル化しよう：

<div *ngIf="cardForm"> 
    <form [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()"> 

    </form> 
    </div>