Angular2：嵌套表单没有值访问器答案

【问题标题】：Angular2: No value accessor for a nested formAngular2：嵌套表单没有值访问器
【发布时间】：2017-04-05 02:52:05
【问题描述】：

我创建了一个带有嵌套表单组的表单：

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'

【问题讨论】：

嗨，我们（在工作中）一直在研究这个主题，我给出了一个正确的答案，你可能想在这里查看stackoverflow.com/a/55457210/2398593 :)

标签： angular

【解决方案1】：

这似乎是表单的问题，来自GitHub issues

因此，您目前必须为此采取一些解决方法。根据对该问题的最后评论，您可以尝试已完成的操作：

我花了一些时间来弄清楚如何使用响应式形式。我所要做的就是实现 ControlValueAccessor 并在选择/取消选择时从 ngAfterViewInit 传播更改。

使用您的代码，我发现的另一个解决方法是在选择上使用ngDefaultControl。

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

但随之而来的问题是，当您进行更改时，它不会反映在表单值中。因此，当值发生变化时，一个快速的解决方法是patchValue。这可能不漂亮，但很有效。

使用 ng2-select2 的更改事件的模板：

(valueChanged)="changed($event)"

要修补其中一个值的组件：

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

【讨论】：

【解决方案2】：

尝试将ngControlDefault 添加到您的<div>。

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

【讨论】：