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

component.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>

component.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 （这似乎是我google时提到的很多东西，但不是表格会抛出错误。）

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

Answer 1

除了ReactiveFormsModule

之外，

导入.bButton{ color:#fff; height: 100%; background-color: #55862d; padding:7px 7px 7px 7px; margin-left: auto; } .d { font-weight:bold; padding:7px 0px 7px 7px; font-size: 1em; color: #55862d; border: 1px solid #6f6b68; width:100%; display: flex; }

Answer 2

我不确定为什么错误似乎指向表单元素之外的锚标记，但它是导致错误的表单元素。将FormGroup添加到表单可以解决问题。

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

Answer 3

在FormsModule文件中导入views.module.ts和ReactiveFormsModule对我有用：

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 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>。

<form ngNoForm>
...
</form>

这应该防止Angular引发控制容器错误。

Answer 6

将此行添加到component.spec.ts：

"english":$("input[name='english']:checked").val(),

Answer 7

在花了2个小时之后，我意识到当我们在app.module和child.module中导入FormModule时，会发生这种错误。简单地从child.module中删除FormModule，然后将解决错误:)

Answer 8

我在Angular（Jasmin）测试案例中遇到了这个问题。

我在beforeEach的单元测试导入中意外添加了角形模块，一个是FormModule（按角度），另一个是自定义FormModule。

我只需要自定义FormModule，一旦我按角度删除了FormModule，问题就解决了

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

没有ControlContainer的提供者 - Angular 5

8 个答案: