Angular 9 “No provider for ControlContainer” VSCode error with a nested Form Builder Form Group

Question

Note: I have searched for answers but all just say to "import ReactiveFormsModule and FormsModule", which I have done. All my other Reactive Forms have no issues.

Also, the code compiles and runs in the browser with no console errors. However, Visual Studio code persists in flagging my nested form component with the error "No provider for ControlContainer" no matter what I try and it's frustrating.

I have a formbuilder group with a nested form group, "billing address". The inputs in this group are in a nested component in the main form, defined in the parent component 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]
    })
  });

The nested component 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;
  ...
}

And then, in the parent component HTML, the code block that is flagged as an error is the spa-compact-address-block component.

<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>

I have also tried adding this to the parent component TS:

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

No effect. As I said, it's really not an error since it compiles and runs but I am really curious as to what I can do differently to ensure the editor does not flag this sort of thing every time I do it.

Answer 1

It seems that the error appears when the variable name formGroup is used. Change it to @Input() fGroup: FormGroup; and make necessary updates in your view file.