ControlContainer 沒有提供程序 - Angular 5

Question

我正在將購買的第三方模板轉換為 Angular 5 應用程序，但遇到了錯誤。 我對 Angular 5 很陌生（但是我很了解 AngularJS）並且不明白它想告訴我什么？ 它似乎與顯示/隱藏頂部導航欄的按鈕有關。

錯誤消息（來自瀏覽器）：

Error: Template parse errors:
No provider for ControlContainer ("imalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      [ERROR ->]<form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-gro"): ng:///AppModule/TopNavigationNavbarComponent.html@4:6

組件.html：

<div class="row border-bottom">
  <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a class="minimalize-styl-2 btn btn-primary " (click)="toggleNavigation()"><i class="fa fa-bars"></i> </a>
      <form role="search" class="navbar-form-custom" method="post" action="#">
        <div class="form-group">
          <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
        </div>
      </form>
    </div>
    <ul class="nav navbar-top-links navbar-right">
      <li>
        <a href="#">
          <i class="fa fa-sign-out"></i> Log out
        </a>
      </li>
    </ul>
  </nav>
</div>

組件.ts

import { Component, OnInit } from '@angular/core';
import { smoothlyMenu } from '../../../app.helpers';

declare var jQuery: any;

@Component({
  selector: 'app-top-navigation-navbar',
  templateUrl: './top-navigation-navbar.component.html',
  styleUrls: ['./top-navigation-navbar.component.less']
})
export class TopNavigationNavbarComponent implements OnInit {

  toggleNavigation(): void {
    jQuery('body').toggleClass('mini-navbar');
    smoothlyMenu();
  }

  constructor() { }

  ngOnInit() {
  }

}

app.module.ts （這似乎是我在谷歌上經常提到的東西，但它不是拋出錯誤的表單。）

...
import { ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
...

Answer 1

除了ReactiveFormsModule FormsModule ，還導入FormsModule

Answer 2

在views.module.ts （自定義模塊文件）文件中導入FormsModule和 ReactiveFormsModule 對我views.module.ts ：

views.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    ...
  ],
  declarations: [
    ...
  ],
  exports: [
   ...
  ],
  schemas: [NO_ERRORS_SCHEMA]
})
export class ViewsModule { }

Answer 3

我不確定為什么錯誤似乎指向表單元素外部的錨標記，但它是導致錯誤的表單元素。 將 FormGroup 添加到表單解決了這個問題。

<form role="search" class="navbar-form-custom" [formGroup]="form">

Answer 4

編輯文件“app.module.ts”； 更改以下指令：

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

具有以下內容：

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

更改以下代碼段：

  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

具有以下內容：

  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],

Answer 5

如果您嘗試從 Angular 組件顯示純 HTML 表單， ngNoForm在<form>標簽中使用ngNoForm ，如下所示。

<form ngNoForm>
...
</form>

這應該可以防止 Angular 拋出控制容器錯誤。

Answer 6

花了 2 個小時之后，我意識到當我們在 app.module 和 child.module 中導入 FormModule 時，會發生這種錯誤。 Simpley 從 child.module 中刪除 FormModule 然后錯誤將被解決:)

Answer 7

將此行添加到您的 component.spec.ts：

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

imports: [
  RouterTestingModule,
  FormsModule
],

Answer 8

我在 Angular(Jasmin) 測試用例中遇到了這個問題。

我在 beforeEach 的單元測試的導入中不小心添加了 angular 表單模塊，一個是 FormModule (by angular)，另一個是 Custom FormModule。

我只需要自定義 FormModule，一旦我刪除了 FormModule（按角度），問題就解決了

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [CustomTranslateModule.forRoot(),
    CustomRightPanelModule,
    CustomListModule,
    CustomInputTextModule,
    CustomMasterPageModule,
    CustomFormModule,
    FormModule, // this is unnecessary 
    .....................
    .....................