Javascript 角度9“；没有ControlContainer的提供程序“；嵌套表单生成器表单组的VSCode错误

注意：我已经搜索了答案，但都只是说“导入反应FormsModule和FormsModule”，我已经这样做了。我所有其他的反应形式都没有问题

此外，代码在浏览器中编译和运行，没有控制台错误。然而，无论我做了什么尝试，VisualStudio代码都坚持用错误“No provider for 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]
    })
  });

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;
  ...
}

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

嵌套组件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]
    })
  });

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;
  ...
}

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

然后，在父组件HTML中，标记为错误的代码块是

spa压缩地址块

组件

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

---

没有效果。正如我所说，这并不是一个错误，因为它编译并运行，但我真的很好奇我能做些什么，以确保编辑器不会在每次我这样做时都标记这类事情。

似乎在使用变量名

formGroup

时会出现错误。将其更改为

@Input（）fGroup:FormGroup并在视图文件中进行必要的更新