Angular 9 “沒有 ControlContainer 的提供者” VSCode 錯誤，帶有嵌套的表單生成器表單組

Question

注意：我已經搜索了答案，但都只是說“導入 ReactiveFormsModule 和 FormsModule”，我已經這樣做了。 我所有其他反應式 Forms 都沒有問題。

此外，代碼在瀏覽器中編譯和運行，沒有控制台錯誤。 但是，無論我嘗試什么，Visual Studio 代碼都會持續用錯誤“沒有 ControlContainer 的提供程序”來標記我的嵌套表單組件，這令人沮喪。

我有一個帶有嵌套表單組“帳單地址”的表單生成器組。 該組中的輸入位於主窗體中的嵌套組件中，在父組件 TS 中定義：

  fedexFormGroup = this.fb.group({
    fedexAccountNumber: ['', Validators.required],
    fedexAccountNickname: [''],
    fedexDifferentAddress: [false],
    fedexIncludesSmartPost: [false],
    fedexAcceptTerms: [false],
    billingAddress: this.fb.group({
      addressLine1: [null, Validators.required],
      addressLine2: [null],
      company: [null],
      countryCode: [null, Validators.required],
      city: [null, Validators.required],
      email: [null, Validators.email],
      name: [null, Validators.required],
      phone: [null],
      postalCode: [null, Validators.required],
      residential: [false],
      state: [null, Validators.required]
    })
  });

嵌套組件 TS：

import { Component, OnInit, Input } from '@angular/core';
import { ControlContainer, FormGroupDirective, FormGroup } from '@angular/forms';

@Component({
  selector: 'spa-compact-address-block',
  templateUrl: './compact-address-block.component.html',
  styleUrls: ['./compact-address-block.component.scss'],
  viewProviders: [
    {
      provide: ControlContainer,
      useExisting: FormGroupDirective
    }
  ]
})
export class CompactAddressBlockComponent implements OnInit {
  @Input() formGroup: FormGroup;
  @Input() submitted = false;
  ...
}

然后，在父組件 HTML 中，標記為錯誤的代碼塊是spa-compact-address-block組件。

<form [formGroup]="formGroup">

...some top level form stuff..

   <div[formGroup]="rsFormGroup" *ngIf="isReceiving">

...second level form group fields ...

      <div[formGroup]="fedexFormGroup" *ngIf="isfedex">
        <spa-compact-address-block
          [formGroup]="billingAddressControl"
          [submitted]="submitted"
        ></spa-compact-address-block>
      </div>

   </div>

</div>


</form>

我也嘗試將其添加到父組件 TS：

  get billingAddressControl() {
    return this.fedexFormGroup.controls.billingAddress as FormGroup;
  }

沒有效果。 正如我所說，它確實不是錯誤，因為它可以編譯並運行，但我真的很好奇我可以做些什么不同的事情來確保編輯器不會在每次我這樣做時都標記這種事情。

Answer 1

使用變量名formGroup時似乎出現錯誤。 將其更改為@Input() fGroup: FormGroup; 並在您的視圖文件中進行必要的更新。