错误错误: NG0201:在NodeInjector中未找到NgControl的提供程序
是Angular框架中的一个错误，表示在使用NgControl指令时，未找到该指令所需的依赖注入提供程序。
NgControl是Angular中表单控件的基本指令，用于在表单中进行验证和数据绑定操作。它提供了一些常用的属性和方法，如value、valid、dirty等，用于获取表单控件的值和验证状态。
出现这个错误的原因可能是以下几种情况：
- 没有在组件或模块中正确导入NgControl模块。
- 没有在模板文件中正确使用NgControl指令或属性。
- 在当前组件的父组件中未正确注入或提供NgControl的依赖。
解决这个错误的方法有几种途径：
- 确保在当前组件所在的模块中正确导入NgControl模块。可以通过在模块文件中的imports数组中添加
import { NgControl } from '@angular/forms';语句来导入。 - 在模板文件中使用NgControl指令时，确保指令被正确使用，并且所在的元素是表单控件。例如，如果要使用NgControl的属性，可以在元素上使用
[ngControl]属性绑定，如<input [ngControl]="myControl">。 - 如果当前组件是其他组件的子组件，需要在父组件中正确注入或提供NgControl的依赖。可以通过在父组件的providers数组中添加
providers: [NgControl]语句来提供依赖。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：提供弹性计算能力，适用于各类应用场景。链接：https://cloud.tencent.com/product/cvm
- 腾讯云对象存储（COS）：提供安全、稳定、高可用的对象存储服务，适用于多媒体处理、数据备份等场景。链接：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：提供多种人工智能能力，包括图像识别、语音识别、自然语言处理等，可应用于智能推荐、智能客服等领域。链接：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：提供全面的物联网解决方案，包括设备管理、数据采集、远程控制等功能，适用于智能家居、智能制造等场景。链接：https://cloud.tencent.com/product/iot
- 腾讯云区块链（BCA）：提供安全、高效的区块链服务，支持搭建和管理区块链网络，适用于供应链金融、数字资产等领域。链接：https://cloud.tencent.com/product/bca
注意：以上链接仅供参考，请根据实际需求选择适合的产品。
相关·内容
我正在尝试创建自定义的角2验证程序指令，它像这样注入NgControl：
@Directive({
selector: '[ngModel][customValidator]',
providers: [{provide: NG_VALIDATORS, useExisting: CustomValidatorDirective, multi: true}]
})
export class CustomValidatorDirective implements Validator {
private validateFunction: ValidatorFn;
浏览 0提问于2016-10-01得票数 20
回答已采纳
如何从单元测试访问注入的ngControl？如何解决错误？
在组件中
constructor(
@Self() @Optional() public ngControl: NgControl
) { }
ngOnInit(): void {
this.ngControl.valueChanges
单元测试
beforeEach(() => {
fixture = TestBed.createComponent(component);
fixture.detectChanges();
执行测试时，获取错误TypeError: Cannot re
浏览 0提问于2018-07-31得票数 12
回答已采纳
1回答
我试图在自定义组件上使用ngControl。我已经创建了组件并在组件上实现了ControlValueAccessor。
然后在构造函数中注入NgControl，如下所示：
constructor(@Self() private ngControl: NgControl){
this.ngControl.valueAccessor = this;
}
但是这样，当我在选择器上使用ngControl时，表单类(ng-pristine , ng-touched, ng-invalid)不会被更新，也不能检查表单元素的值。
有人能帮我找到我做错的地方吗。
添加对问题的描述，我尝试解决方案，使用
浏览 0提问于2016-03-29得票数 3
1回答
我有两个角度分量。
parent.ts和child.ts
Parten.ts有一个表单组，child.ts通过CVA将表单日期传递给父节点。
现在，我希望构建一个可重用的子组件，以便能够生成子类1.ts、子2.ts、…
到目前为止，这一切都很好，我必须构建这样的多个组件。
现在，我有一个问题，一些子组件是必需的，而另一些则不是。
如果我在父组件中提供验证器，如果字段为空，则验证工作和表单无效，但子组件本身不会获得从parent.ts传递的验证状态，因此仍然有效。
这会导致子节点没有显示ng-error消息。
如何将验证状态从父级传递给子节点以显示错误消息？
浏览 4提问于2022-10-13得票数 0
回答已采纳
我正在构建一个定制组件，它实现了ControlValueAccessor，这样我就可以在from中与ngControl和ngModel一起使用它。现在，我希望逻辑验证组件在其中的self (因此它是自包含的)。到目前为止还不错，但是现在我有一个循环依赖项，因为我试图在一个组件中注入NgControl (以设置外部表单状态)，该组件将它自己注入为一个提供程序。在这里，代码：
const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(
NG_VALUE_ACCESSOR, {
useExisting: forwardRef(()
浏览 2提问于2016-06-13得票数 2
我通过实现DateInputComponent编写了自己的自定义表单元素ControlValueAccessor，并按如下方式使用：
<my-date-input ngControl="date"></my-date-input>
据我所知，ngControl是[ngFormControl]="myControlGroup.controls['date']"的语法糖。
现在，在我的DateInputComponent中，我想访问NgFormControl。
我试图将它绑定到@Input NgFormControl ngFo
浏览 6提问于2017-03-31得票数 1
回答已采纳
我用ControlValueAccessor创建了一个自定义输入，我可以在formControl中使用它，它工作得很好。现在，我想知道表单控件何时被认为是无效的，以便在我的自定义组件中的输入中显示红色边框。
以下是我的自定义输入：
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss'],
providers: [
{
provide: NG_V
浏览 6提问于2022-09-23得票数 1
回答已采纳
角12 - TypeError:不能读取null的属性(读取'writeValue')
我正在创建一个通用文本输入组件，在为项目提供服务时，一切都运行良好，但是在构建的项目中，我得到了以下错误：
TypeError:无法读取null属性(读取'writeValue')
HTML：
<div class="p-field">
<label>{{label}} <span class="p-error">{{checkRequired(ngControl.control) ? '
浏览 6提问于2021-10-03得票数 6
1回答
我正在创建一个实现ControlValueAccessor的组件，以便以一种反应性的形式使用，它只是一个带有管道的输入元素的包装器。
为了检索有效/无效的状态并将它们传播到内部输入元素，我注入了NgControl。
当在另一个输入中找到输入值时，它是无效的。
在Stackblitz上运行良好，但是当我对ng构建-prod时，它会引发错误：
ERROR in :没有NgControl提供程序("ERROR ->“)
你看到什么问题了吗？
谢谢!
浏览 1提问于2019-03-21得票数 3
回答已采纳
我在创建一个自定义验证器时遇到了问题，该验证器用于模板驱动的表单。我想要构造函数注入主机元素的NgControl，它也有一个NgModel指令。但是我一直收到下面的Angular编译错误： ERROR in : Cannot instantiate cyclic dependency! NgModel ("
<div>
<label for="name">Your name</label>
[ERROR ->]<input id="n
浏览 12提问于2019-06-17得票数 1
回答已采纳
1回答
我有以下课程：
export class TestComponent implements OnInit, ControlValueAccessor {
constructor(
@Optional()
@Self()
public ngControl: NgControl) {
if (ngControl) {
ngControl.valueAccessor = this;
}
}
我想写一个关于它的故事。
这就是我尝试过的，它不起作用
export const test= () => ({
moduleMetadata: {
浏览 1提问于2020-07-01得票数 0
当我将自定义的idNumber指令添加到子HTML元素时，所有操作都很好。我想在父类中使用它。然而，这是行不通的。
// custom directive ////////
@Directive({
selector: "[idNumber]"
})
export class IcoDirective implements OnInit {
formControl: FormControl;
constructor(private control: NgControl) { }
ngOnInit() {
this.formControl = <FormContr
浏览 0提问于2018-09-17得票数 1
我想要创建一个自定义窗体控件来处理自身上的任何错误。这意味着显示此组件中的错误。我创建了一个实现ControlValueAccessor的组件。我可以像这样读取错误表单：form.controls.myfieldname.errors.aErrorName，所以我将form.controls.myfieldname传递给我的constom控件。
是否有更好的方法为自定义窗体控件创建字段验证？
我的自定义控件：
@Component({
selector: 'input-text2',
templateUrl: './input-text2.compone
浏览 4提问于2016-10-12得票数 0
回答已采纳
我正在尝试访问自定义中的NgControl
constructor(
@Self() @Optional() public ngControl: NgControl,
private fb: FormBuilder,
private fm: FocusMonitor,
private elRef: ElementRef<HTMLElement>
) {
this.createForm();
console.log('<< ', this.ngControl);
if (this.ngContr
浏览 0提问于2020-09-11得票数 0
我必须按照下面的格式
form = new FormGroup({
title: new FormControl(null, {updateOn: 'blur'}),
})
对于标题输入，我创建了一个实现ControlValueAccessor的自定义控件ControlValueAccessor。如何访问此控件中的updateOn选项？
浏览 1提问于2019-10-29得票数 3
回答已采纳
为了在组件中访问NgControl，我创建了构造函数：
NgControl _cd;
MyDateEditComponent(@Self() @Optional() this._cd);
我想像这样使用我的组件：
<my-date-edit [(ngModel)]="date" ngControl="date">
或
<my-date-edit [(date)]="date" ngControl="date">
现在我有了错误：
断言失败：“(日期)没有值访问器，否则指令列表中可能缺少formDirecti
浏览 0提问于2018-08-08得票数 1
我的目标：创建一个基于角度材料组件的自定义组件
Problem：当用户按下父组件上的submit按钮时，将mat-表单字段和mat错误包装到组件中不会触发验证。
我在这里创建了演示：
我的问题/注意事项是：
实现这一目标的正确方法是什么？在演示中，有一个简单的输入+验证，但稍后会有许多更复杂的组件--我尝试实现ControlValueAccessor，但它对我不起作用，或者我可能无法实现它。我得到的错误不能设置对象对象的属性验证器，它只有一个getter，当我试图将ngControl绑定到formControl属性时，在ngControl的演示示例中，在#2中，ControlValueAcc
浏览 1提问于2020-02-12得票数 0
1回答
指令不适用于非数字值
、、、、
我已指示禁止在输入中输入非数字符号
下面是一个指令
import { NgControl } from "@angular/forms";
import { HostListener, Directive } from "@angular/core";
@Directive({
exportAs: "number-directive",
selector: "number-directive, [number-directive]",
})
export class Numbe
浏览 17提问于2021-09-20得票数 0
我发现了克里斯蒂安·吕德曼- 的一篇博文，其中注入的NgControl的FormControl被绑定到模板中的FormControl：
//...
public formControl = new FormControl('');
//...
constructor(public ngControl: NgControl) {
ngControl.valueAccessor = this;
}
public ngAfterViewInit(): void {
// syncing with validators o
浏览 4提问于2022-07-07得票数 0
我正在寻找一些在Angular 9中用于自定义表单控件的单元测试的示例。这部分constructor(@Self() private ngControl: NgControl)会导致错误：Error: NodeInjector: NOT_FOUND [NgControl]。因为我需要以某种方式设置值访问器。
我在构造函数中注入了ngControl，因为稍后我需要在组件中使用ngControl。这就是为什么我没有在provide: NG_VALUE_ACCESSOR中使用典型的实现。
我试图通过以下方式来嘲笑它：
beforeEach(async(() => {
TestBed.c
浏览 0提问于2020-03-12得票数 1
我有以下组件：
@Component({
selector: 'pc-radio-button',
templateUrl: './radio-button.component.html',
providers: [
{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FieldRadioButtonComponent), multi: true}
]
})
export class RadioButtonComponent implement
浏览 0提问于2017-08-18得票数 30
回答已采纳
我试图在一些html中添加一个指令。我知道这个错误：
NullInjectorError: No provider for NgControl!
at NullInjector.get (:4200/vendor.js:150837:27)
at R3Injector.get (:4200/vendor.js:151004:33)
at R3Injector.get (:4200/vendor.js:151004:33)
at R3Injector.get (:4200/vendor.js:151004:33)
at NgModuleRef.get
浏览 16提问于2022-03-15得票数 0
1回答
我正在设置一个可重用的文本输入，可以与反应性表单一起使用。
当我将它添加到app模块的声明数组并发出ng serve时，我会得到以下错误。
/ Generating browser application bundles (phase: building)...C:\SPA\node_modules\typescript\lib\typescript.js:19487
return text.replace(/{(\d+)}/g, function (_match, index) { return "" + ts.Debug.checkDefined(args[
浏览 4提问于2022-10-01得票数 0
回答已采纳
1回答
我有一个自定义结构指令(appValidatorErrorMessage)，我想在反应性表单的输入字段中使用它。我需要结构指令，因为我希望在输入标记旁边创建新的兄弟级DOM元素。我的计划是创建一个指令：
is-invalid)and 检查验证状态，如果输入无效，则添加新的类条目(例如，然后使用Bootstap.的“无效反馈”类从FormControl.errors生成验证消息。
下面是带有指令的输入元素：
<input type="email" class="form-control" id="email" [formControl]=&#
浏览 6提问于2020-11-28得票数 1
我将角从ComponentFactoryResolver更新为v14，现在使用v9和AbstractControlDirective时出现了错误
这是我的directive.ts
private componentRef: ComponentRef<FormErrorComponent>;
private ngControl: NgControl;
private unsubscribe$ = new Subject();
constructor(
private viewContainerRef: ViewContainerRef,
private
浏览 4提问于2022-11-09得票数 0
回答已采纳
我的app.component中有以下代码，它是父代码
ts
public databaseForm = new FormGroup({
test: new FormControl([])
});
html
<form [formGroup]="databaseForm">
<add-code-description formControlName="test"></add-code-description>
</form>
在我的add代码描述组件中，我有另一个组
<form [formGro
浏览 9提问于2022-10-06得票数 0
我是一个角度方面的新手，学习使用角10的在线课程，但只停留在一个点上。我正在尝试实现Reactive 。为此，我添加了一个新的组件文本输入。text-input.component.ts的代码如下：
import { Component, Input, Self } from '@angular/core';
import { ControlValueAccessor, NgControl } from '@angular/forms';
@Component({
selector: 'app-text-input',
template
浏览 4提问于2020-12-29得票数 15
回答已采纳
我有一个反应式。设置与以下内容类似：
myForm: FormGroup;
this.myForm= new FormGroup({
name: new FormControl("", [Validators.required, Validators.maxLength(15), Validators.pattern('...')]),
...
});
我在我的表单上这样使用：
<input
type="text"
formControlName="name
浏览 9提问于2019-06-13得票数 5
1回答
支持Angular2中嵌套字段的任何方式。
类
ngOnInit() {
this.form = this._fb.group({
name: {
given: ['', Validators.required],
middle: [''],
family: ['', Validators.required]
}
});
}
模板
<form [ngFormModel]="form">
<input ngControl="name.given" type=
浏览 3提问于2016-06-13得票数 0
回答已采纳
你好，我是新来的角2和天使，请帮帮我。
我已经创建了需要验证的表单。我正在尝试从@转角/通用导入指令或服务，这会显示错误。我试图访问ControlGroup和控制从@角/公共。对于验证，我使用FormBuilder
我不明白我做错了什么
这是我的组件类型记录文件
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
import {Cont
浏览 6提问于2016-11-17得票数 1
回答已采纳
我试图通过实现MatFormFieldControl、ControlValueAccessor和Validator接口来创建自定义表单控件。
但是，当我提供NG_VALUE_ACCESSOR或NG_VALIDATORS时。
@Component({
selector: 'fe-phone-number-input',
templateUrl: './phone-number-input.component.html',
styleUrls: ['./phone-number-input.component.scss'],
prov
浏览 0提问于2018-02-08得票数 14
回答已采纳
我有一个嵌套的表单组件，它的<input>字段设置为使用formControlName="nested"。验证器设置在父FormControl上，如下所示：
form = this.fb.group({
value: ['', [Validators.required, Validators.minLength(3)]],
nested: ['', [Validators.required, Validators.minLength(3)]],
});
我希望将状态从父FormControl传播到嵌套的<
浏览 1提问于2019-07-10得票数 2
回答已采纳
我第一次尝试在我的应用中使用ngControl：
<md-input placeholder="Amount" value="0" ngControl="ammount" required></md-input>
在我的组件中添加了以下内容：
import { FORM_PROVIDERS,FORM_DIRECTIVES } from '@angular/common';
..
directives: [MD_INPUT_DIRECTIVES,
FORM_DIRECTIVES,
],
浏览 1提问于2016-05-18得票数 5
回答已采纳
提供
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TestingComponent),
multi: true
}
注入NgControl
constructor(@Self() @Optional() public control: NgControl) {
this.control && (this.control.valueAccessor = this);
}
但这里却缺少了什么？
虽然@Eliseo的答案很有解释性，但还有一个补充.如果希望同时使用外部验证器和内
浏览 1提问于2019-07-24得票数 4
回答已采纳
从控件值访问器的以下设置开始：
@Component({
selector: 'some-datepicker',
template: `
<input
[attr.name]="formControlName"
[matDatepicker]="picker"
[value]="inputValue"
(blur)="onBlur($event)
/>
<mat-datepicker-to
浏览 9提问于2022-01-30得票数 1
1回答
结构分型与多态性--添加超级类型
、、、、
下面是使用语法从TypeScript获取的示例代码(多态)，
export abstract class AbstractControlDirective {
...
}
AbstractControlDirective 亚型
export abstract class NgControl extends AbstractControlDirective {
...
}
export abstract class ControlContainer extends AbstractControlDirective {
...
}
export declare abstra
浏览 0提问于2018-04-28得票数 1
回答已采纳
我有一个指令，我想注入'NgControl‘，但得到了'No provider for NgControl’错误。
我的文件目录如下：
app folder
|--directives folder
|--myDirective
|
|--components folder
|--events folder
|--event.module.ts
|--event1 folder
|--event1.compoenent.html &
浏览 19提问于2019-11-13得票数 0
就像一样，如果您试图使用指令访问ngControl.control：
export class DisabledDirective {
@Input()
set opDisabled(condition: boolean) {
const action = condition ? 'disable' : 'enable';
this.ngControl.control[action]();
}
constructor(private ngControl: NgControl) {}
}
您将在第一次呈现时出现错误：
core.j
浏览 1提问于2020-02-20得票数 7
回答已采纳
有没有什么合适的方法可以用基于模板的方法用*ngFor生成*ngControl？该问题与中的问题相同，但不希望通过控件生成来阻碍控制器逻辑。在angular测试版中，17正在运行
<form>
<input *ngFor="let val of vals; let idx = index" [ngModel]="val" ngControl="input-{{idx}}">
</form>
但是在2.0.0中，使用这种方法更新vals会导致EXCEPTION: The null object does
浏览 0提问于2016-11-01得票数 0
这是我的表格：
app.component.html
<form [ngFormModel]="myForm">
<my-child-component></my-child-component>
</form>
app.component.ts
constructor ( private _formBuilder : FormBuilder ) {
this.myForm = _formBuilder.group( {
firstName : ["",Validators.
浏览 0提问于2016-05-31得票数 13
回答已采纳
3回答
该应用程序运行良好，但在转到新计算机之后。
离子2应用程序完全失效，安装在新计算机后出现以下错误，我使用的是最新的节点7.0
sudo npm install -g ionic cordova
sudo npm install -g angular2-cli
npm update
在执行之前运行的上述命令
ionic serve
[21:57:16] ionic-app-scripts 0.0.39
[21:57:16] watch started ...
[21:57:16] build dev started ...
[21:57:16]
浏览 3提问于2016-11-01得票数 0
我试图在自定义材料输入文本框中应用ControlValueAccessor错误验证样式。自应用此自定义组件以来，formControlName/FormBuilders的所有红色边框验证状态都不会显示最小长度等。在应用自定义控件之前，它本机(在框外)与角材料文本框一起工作。
目标是使自定义textbox与表单验证一起工作。matInput文本框自然地显示了这一点。
更新：发布了答案；但是不确定它的最有效的答案，试图让Saloo回答也能工作(如果有人可以发布stackbliz，那就太好了)，开放给任何更有效的选项。
打字本：
import { Component, OnInit, In
浏览 0提问于2019-11-28得票数 12
回答已采纳
在父组件中，我定义表单。 cartForm = new FormGroup({
company: new FormControl('', [Validators.required]),
costCenter: new FormGroup({
account: new FormControl('', [Validators.required]),
activity: new FormControl('', [Validators.required, Validators.maxLength(5), Va
浏览 29提问于2020-10-14得票数 0
回答已采纳
1回答
当以角度处理表单时，正常的方法是直接在表单中包含表单元素(如输入)。
<form>
<input>
</form>
当这个表单被提交并且输入有一个验证器。必填项。表单输入被验证，如果它无效，我们可以向用户显示.好极了..。
为了能够重用自定义输入，我们可以创建一个包含此输入+附加的组件。
<form>
<custom-component>
</form>
检查这个stackblitz：
当点击提交按钮时，只有一个输入被验证。如果您与这两个输入交互，它们将验证
据我所见，在CVA组件中没有什么奇怪的东西。
@Compon
浏览 1提问于2020-11-04得票数 0
回答已采纳
我在<input>-element上使用一个指令，并获得对其控件的引用，如下所示：
@ContentChild(NgControl) private readonly _inputNgControl: NgControl;
但是当我听模型的变化时：
ngAfterContentInit(): void {
this._inputNgControl.control.valueChanges
.distinctUntilChanged()
.subscribe(value => {
// ...
});
}
看来，
浏览 0提问于2018-06-06得票数 1
回答已采纳
目前，我们将把旧的应用程序移植到新的技术上，摆脱旧的设计失败，提高整体的用户体验。
目前，我们将所有标准输入封装在自己的组件中，因此如果需要，我们可以很容易地对其进行更改。我们所有的输入组件都可以有一个验证，但是输入组件可以嵌套在bootstrap的输入组中，如下所示：
<form #myForm="ngForm">
<div>
<label>Birth Year</label>
<vng-controls-textbox #user="ngModel" name="user
浏览 2提问于2018-06-21得票数 0
我有两个指令，toPercentage，其中乘法数与100，另一个isRounding，其中选择数字后的.00(十进制)，都是一个接一个工作，但不能在一起！
<input type="number" name="name" toPercentage isRounding [ngModel]="val.employerShare" (ngModelChange)="val.employerShare = $event">
这两个指令实现了一个自定义值访问器，当我在输入字段中使用它们时，它会抛出此错误。
错误:在_thr
浏览 1提问于2017-05-10得票数 0
1回答
我构建了一个带有角的标准寄存器表单，我想验证电子邮件是否已经使用异步指令(UserExistsDirective)接收，然后使用第二个指令(ValidityStyleDirective)管理错误消息。第二个指令也用于其他输入。
ValidityStyleDirective需要等到UserExistsDirective完成后才能执行。否则，错误消息将不同步。
这里是我迄今为止所做的代码，我很难找到正确的解决方案，所以我需要帮助！同样，UserExistsDirective需要在goto ValidityStyleDirective之前完成。我怎么才能用棱角做那件事？
谢谢,
HTML：
...
浏览 4提问于2022-07-07得票数 1
回答已采纳
2回答
我有一个自定义组件，它将引导窗体组应用于我的窗体字段。在我的组件中，我有以下属性：
import { Component, Input, ContentChild } from '@angular/core';
import { NgControl } from '@angular/common';
@Component({
selector: 'form-field',
template: `
<div class="form-group" [ngClass]="{'
浏览 2提问于2016-06-10得票数 1
回答已采纳
我已经尝试导入FormsModule和NgForm模块，并将FormsModule添加到导入数组中。
下面是我的代码：
//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, NgForm} from '@angular/forms';
@Component({
se
浏览 17提问于2018-06-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
