角度错误：NodeInjector：NOT_FOUND [ControlContainer]

Question

core.js:5873 错误错误：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

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

在您的实例中app.component.ts，您必须定义实例并通过以下方法FormGroup初始化/注册它：ngOnInit

    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 2

您必须将两者都导入 import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms';到相应的 module.ts 文件中。这对我有用。

Answer 3

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

Answer 4

您的问题与此问题非常相似，并且您的代码看起来丢失了，[formGroup]因为它在此问题中提到：

Angular 5：“没有 ControlContainer 的提供者”

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