Angular V11：NullInjectorError：没有 ControlContainer 的提供者

Question

我有一个根据本文制作的自定义输入：medium.com：dont-reinvent-the-wheel。

\n

这是我的代码，它处于严格模式 \xe2\x96\xbc

\n

// input.component.ts\n\nimport { Component, Input, ViewChild } from \'@angular/core\';\nimport {\n    ControlContainer,\n    ControlValueAccessor,\n    FormControl,\n    FormControlDirective,\n    NG_VALUE_ACCESSOR\n} from \'@angular/forms\';\nimport {\n    FloatLabelType,\n    MatFormFieldAppearance\n} from \'@angular/material/form-field\';\n\n@Component({\n    selector: \'app-input\',\n    templateUrl: \'./input.component.html\',\n    styleUrls: [\'./input.component.scss\'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: InputComponent,\n            multi: true\n        }\n    ]\n})\nexport class InputComponent implements ControlValueAccessor {\n    isDisabled!: boolean;\n\n    @Input() isRequired!: boolean;\n\n    @Input() label!: string;\n\n    @Input() placeholder!: string;\n\n    @Input() readonly!: boolean;\n\n    @Input() appearance: MatFormFieldAppearance = \'fill\';\n\n    @Input() floatLabel: FloatLabelType = \'auto\';\n\n    @ViewChild(FormControlDirective, { static: true })\n    formControlDirective!: FormControlDirective;\n\n    @Input() formControl!: FormControl;\n\n    @Input() formControlName!: string;\n\n    get control(): FormControl {\n        return (\n            this.formControl ||\n            this.controlContainer.control?.get(this.formControlName)\n        );\n    }\n\n    constructor(private controlContainer: ControlContainer) {}\n\n    clearInput(): void {\n        this.control.setValue(\'\');\n    }\n\n    registerOnTouched(fn: any): void {\n        this.formControlDirective.valueAccessor?.registerOnTouched(fn);\n    }\n\n    registerOnChange(fn: any): void {\n        this.formControlDirective.valueAccessor?.registerOnChange(fn);\n    }\n\n    writeValue(obj: any): void {\n        this.formControlDirective.valueAccessor?.writeValue(obj);\n    }\n\n    setDisabledState(disabled: boolean): void {\n        this.isDisabled = disabled;\n    }\n}\n

\n

<!-- input.component.html -->\n\n<div class="custom-input">\n    <mat-form-field\n        [appearance]="appearance"\n        [floatLabel]="floatLabel"\n        class="custom-input__form-field"\n    >\n        <mat-label class="custom-input__label"\n            >{{ label }} <span *ngIf="isRequired && label">*</span></mat-label\n        >\n        <input\n            class="custom-input__value"\n            matInput\n            type="text"\n            [formControl]="$any(control)"\n            [placeholder]="placeholder"\n            [readonly]="readonly"\n        />\n        <button\n            class="custom-input__clear-btn"\n            matSuffix\n            mat-icon-button\n            aria-label="Clear"\n            *ngIf="$any(control).value && !readonly"\n            (click)="clearInput()"\n        >\n            <mat-icon>close</mat-icon>\n        </button>\n    </mat-form-field>\n</div>\n

\n

没有编译器错误，但浏览器记录此错误 \xe2\x96\xbc

\n

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(ClientsListModule)[ControlContainer -> \nControlContainer -> ControlContainer -> ControlContainer -> ControlContainer -> ControlContainer]: \n  NullInjectorError: No provider for ControlContainer!\nNullInjectorError: R3InjectorError(ClientsListModule)[ControlContainer -> ControlContainer -> ControlContainer -> \nControlContainer -> ControlContainer -> ControlContainer]: \n  NullInjectorError: No provider for ControlContainer!\n

\n

我在这里检查了类似的问题Angular 5: "Noprovider for ControlContainer"和这里Noprovider for ControlContainer，根据他们的说法，问题是没有在各自的模块中导入ReactiveFormsModule和FormsModule，但我正在导入它们，但我仍然看到错误。

\n

\n

更新 1： \nIn 组件<app-input>按以下方式使用 \xe2\x96\xbc

\n

\n

Answer 1

由于在某些情况下您似乎使用formControlwithout formGroup，因此在这些情况下使用@Optional装饰器具有controlContainernull 。

constructor(@Optional() private controlContainer: ControlContainer) {}