Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

Question

core.js:5873 ERROR Error: NodeInjector: NOT_FOUND [ControlContainer]

有时当我重新启动项目时它运行完美。只有 app.component.html 有变化：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <form action="">

        <div class="form-group">
          <label for="">Username</label>
          <input type="text" name="username" class="form-control" />
        </div>
        <div class="form-group">
          <label>Password</label>
          <input type="password" class="form-control">
        </div>
        <div class="form-group">
          <label>Confirm Password</label>
          <input type="password" class="form-control">
        </div>
        <div>
          <button type="submit" class="btn btn-primary btn-block">Register</button>
        </div>
      </form>
      
    </div>
  </div>
</div>

Answer 1

你的问题与这个问题非常相似，你的代码看起来缺失 [formGroup] 正如这个问题中提到的：

如果你尝试它的答案，对你有用吗？

Answer 2

在您的代码中缺少 formGroup 试试这个： <form [formGroup] = "">

Answer 3

就我而言，我忘记将 ReactiveFormsModule 放入相应 .spec.ts 文件中的 imports 部分。

Answer 4

在 app.module.ts 中，我在 imports 部分添加了 ReactiveFormsModule。请记住在顶部将其导入为：import { ReactiveFormsModule} from '@angular/forms.

在您的 app.component.ts 中，您必须通过 ngOnInit 方法定义 FormGroup 实例和 initialize/register 实例，如下所示：

    import { FormGroup, FormControl } from '@angular/forms'; //imports
.......................................................................
    myForm:FormGroup;  
    ngOnInit(){
         this.myForm = new FormGroup({          
               'name':new FormControl(null), //note, can have up to 3 Constructor Params: default value, validators, AsyncValidators
               'email':new FormControl(null,Validators.email)

          })
    }

然后将表单绑定到 FormGroup 实例 myForm:

<form [formGroup]="myForm">

注意name和email是表单中的控件，需要使用formControlName绑定：

<input type="text" name="name" formControlName="name">

Answer 5

你必须同时导入， import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms'; 到相应的 module.ts 文件中。这对我有用。

Answer 6

我运行进入了类似的场景。

问题是 angular v9 不再喜欢 @Host()。修复正在从构造函数中的依赖项声明中删除 @Host()。

https://github.com/angular/angular/issues/31539

Answer 7

如果您使用 Modal for Ionic

然后导入这个

从'@angular/forms'导入{FormGroup，FormControl}； //进口

到模态的父模块。

Answer 8

确保您已正确配置以下所有条件

在app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
   ReactiveFormsModule
  ],
  providers: [],
  bootstrap: []
})

在app.component.ts

userForm:FormGroup = new FormGroup({
      'username': new FormControl(null,Validators.required),
      'password': new FormControl(null,Validators.required),
      'confirm-password': new FormControl(null,Validators.required)
})

在HTML代码中

<form [formGroup]="userForm">
......
</form>

Answer 9

我遇到了与 Angular 9 相同的问题，我已经导入了 ReactiveFormsModule 和 FormsModule。

事实证明，@Host() 装饰器无法与 Ivy 一起使用。唯一有用的解决方案是从构造函数的依赖声明中删除 @Host()。

Angular 新渲染引擎 Ivy doesn't like @Host() decorator.

Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

angular

mean-stack

mean