Angular2：嵌套的表格

Question

I'e No值访问创建了一个嵌套的表格组的一种形式：

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], 
    }, this.validateCardExpiry), 
    cvc: ['', Validators.required] 
}); 

进入我的模板：

<form [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()"> 
    <div class="form-group" formGroupName="expiry"> 
     <label for="expirationmonth">Expiration month</label> 
     <select2 id="default-select" 
       name="expirationmonth" 
       formControlName="expirationMonth" 
       [data]="months$ | async" 
       [width]="250" 
       [options]="select2Options"> 
     </select2> 
     <label for="expirationyear">Expiration year</label> 
     <select2 id="default-select2" 
       name="expirationyear" 
       formControlName="expirationYear" 
       [data]="years$ | async" 
       [width]="250" 
       [options]="select2Options"> 
     </select2> 
    </div> 
</form> 

select2是ng2-select2一个组成部分。

角是让我这个消息：

Error: No value accessor for form control with path: 'expiry -> expirationMonth'

Answer 1

尝试增加ngControlDefault您<div>。

<div class="form-group" formGroupName="expiry" ngControlDefault> 

Answer 2

这似乎是一个形式的问题，按照这个从GitHub issues

所以你必须做一些变通方法目前这。按照关于这个问题，你可以尝试做了什么最后的评论：

I spent sometime to figure out using with reactive form. All I had to do was implement implement ControlValueAccessor and propagate change from ngAfterViewInit on select/unselect.

与您的代码周围玩，另一个解决办法，我发现是在选择使用ngDefaultControl。

<select2 ngDefaultControl ..... ></select2> 

但这个上升的问题，当你做出改变，它不会反映在表单中的值。因此，当值发生变化时，快速解决方法是patchValue。这可能不是很好，但有效。

的模板使用NG2，选择2的change事件：

(valueChanged)="changed($event)" 

组件来修补值之一：

changed(e) { // e is of primitive type here 
    this.cardForm.controls['expiry'].controls['expirationMonth'].patchValue(e) 
}