Ionic 4 - Angular 6 formArrayName 未按预期工作

Question

尝试将 formArrayName 与离子复选框列表一起使用这是我的控件：

this.planGroup = this.formBuilder.group({
        ...
        PlanEmails: this.formBuilder.array([
            this.formBuilder.group({
                PlanId: '',
                EmailId: ''
            })
        ]),
    });

这是我的 HTML

         <ion-row>
            <ion-col formArrayName="PlanEmails" [sizeXs]="12" [sizeSm]="6" *ngFor="let email of emails">
              <ion-item>
                <ion-label>{{email.Title}}</ion-label>
                <ion-checkbox formControlName="EmailId" color="secondary" [value]="email.Id" slot="start"></ion-checkbox>
              </ion-item>
            </ion-col>
          </ion-row>

这是我遇到的错误

 ERROR Error: Cannot find control with path: 'PlanEmails -> EmailId'
    at _throwError (forms.js:1732)
    at setUpControl (forms.js:1640)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4454)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4959)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4909)
    at checkAndUpdateDirectiveInline (core.js:9246)
    at checkAndUpdateNodeInline (core.js:10514)
    at checkAndUpdateNode (core.js:10476)
    at debugCheckAndUpdateNode (core.js:11109)
    at debugCheckDirectivesFn (core.js:11069)

尝试将 formArrayName 移动到 ion-row 和 ion-item 但没有成功。
我不知道我做错了。尝试阅读 Angular 文档，但我似乎无法理解。

Answer 1

FromGroup 的例子很少。请关注这个URLhttps://angular.io/guide/reactive-forms

Answer 2

您应该为 EmailId 控件定义正确的路径。

您有 FormArray 个 FormGroup 个 FormControl 个，但在模板中定义了 FormArray 个 FormControl 个。

要修复它，您应该使用 formGroupName 指令。

<ion-col ... *ngFor="let email of emails; let i = index">
                                             ||
                                             \/
                                         add this
    <ion-item [formGroupName]="i">
                         ||
                         \/
                       and this

Ionic 4 - Angular 6 formArrayName 未按预期工作

Ionic 4 - Angular 6 formArrayName not working as expected

angular

angular-reactive-forms

ionic4