[英]Angular2: No value accessor for a nested form
我创建了一个带有嵌套表单组的表单:
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的组件。
Angular收到此消息:
错误:表单控件的无值访问器,路径为:'expiry-> expirationMonth'
因此,您目前必须为此采取一些解决方法。 根据对该问题的最新评论,您可以尝试做些什么:
我花了一些时间弄清楚使用反应形式。 我要做的就是实现ControlValueAccessor,并在选择/取消选择时从ngAfterViewInit传播更改。
在处理您的代码时,我发现的另一个解决方法是在选择ngDefaultControl
上使用ngDefaultControl
。
<select2 ngDefaultControl ..... ></select2>
但是随之而来的问题是,当您进行更改时,它不会反映在表单值中。 因此,一种快速的解决方法是在值更改时对patchValue
进行更改。 这可能并不漂亮,但是可以。
使用ng2-select2的change事件的模板:
(valueChanged)="changed($event)"
修补值之一的组件:
changed(e) { // e is of primitive type here
this.cardForm.controls['expiry'].controls['expirationMonth'].patchValue(e)
}
尝试将ngControlDefault
添加到您的<div>
。
<div class="form-group" formGroupName="expiry" ngControlDefault>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.