Angular 9 Ошибка VSCode «Нет поставщика для ControlContainer» с вложенной группой форм построителя форм

Question

Примечание: я искал ответы, но все говорят просто «импортировать ReactiveFormsModule и FormsModule», что я и сделал. Все мои другие реактивные формы не имеют проблем.

Кроме того, код компилируется и запускается в браузере без ошибок консоли. Однако код Visual Studio продолжает отмечать мой компонент вложенной формы ошибкой «Нет поставщика для ControlContainer», что бы я ни пытался, и это разочаровывает.

У меня есть группа formbuilder с группой вложенных форм, адрес выставления счета ". Входные данные в этой группе находятся во вложенном компоненте в основной форме, определенном в родительском компоненте 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; и внесите необходимые обновления в свой файл просмотра.