Нет провайдера для ControlContainer - Angular 5

Я конвертирую купленный сторонний шаблон в приложение 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 (похоже, это часто упоминалось, когда я гуглил это, однако это не форма, выдающая ошибку.)

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

angular angular-forms angular-components angular5
person Todd Davis    schedule 11.01.2018    source источник

Ответы (8)


arrow_upward
84
arrow_downward

импортировать FormsModule в дополнение к ReactiveFormsModule

person blazehub    schedule 07.06.2018
comment
Это не имеет значения для меня. Все еще получаю ошибку - person emirhosseini; 22.02.2019
comment
Возможно, вам придется перезапустить сервер, чтобы это заработало. - person AC101; 24.03.2020
comment
import FormsModule in addition to ReactiveFormsModule - это решило мою проблему, спасибо - person HuserB1989; 04.08.2021

arrow_upward
27
arrow_downward

У меня работает импорт 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 { }
person Govind Samrow    schedule 10.10.2018
comment
Работает! Вы должны перезапустить сервер, чтобы он вступил в силу. - person coder3; 30.08.2020

arrow_upward
22
arrow_downward

Я не уверен, почему ошибка указывает на тег привязки за пределами элемента формы, но именно элемент формы вызывал ошибку. Добавление FormGroup в форму решило проблему.

<form role="search" class="navbar-form-custom" [formGroup]="form">
person Todd Davis    schedule 11.01.2018
comment
Я столкнулся с той же проблемой. У меня есть 2 формы в двух отдельных компонентах. Я преобразовал только 1 в Angular и получил эту ошибку. Мне нужно преобразовать обе формы в стиль Angular, чтобы приложение снова заработало. - person Manu Chadha; 08.02.2018
comment
Омфг, вот оно. Большое спасибо - person Sarah; 28.09.2020

arrow_upward
10
arrow_downward

Отредактируйте файл «app.module.ts»; изменить следующую инструкцию:

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

со следующим:

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

Измените следующий фрагмент кода:

  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],

со следующим:

  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule
  ],
person dbedit    schedule 08.01.2020

arrow_upward
5
arrow_downward

Если вы пытаетесь отобразить простую HTML-форму из компонента Angular, используйте тег ngNoForm в теге <form> следующим образом.

<form ngNoForm>
...
</form>

Это должно помешать Angular выдавать ошибку контейнера управления.

person Vibhor Dube    schedule 29.05.2020

arrow_upward
3
arrow_downward

Потратив на это 2 часа, я понял, что когда мы импортируем FormModule в app.module, а также в child.module, возникает такая ошибка. Просто удалите FormModule из child.module, тогда ошибка будет устранена :)

person taniya singh    schedule 11.06.2020

arrow_upward
2
arrow_downward

Добавьте эту строку в ваш component.spec.ts:

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

imports: [
  RouterTestingModule,
  FormsModule
],
person ABDESSAMAD FELOUACH    schedule 04.04.2020
comment
Почему component.spec.ts? - person pzaenger; 04.04.2020
comment
@pzaenger, когда проблема в тесте - person Julian Egner; 21.08.2020

arrow_upward
1
arrow_downward

У меня была эта проблема в тестовых примерах Angular (Jasmin).

Я случайно добавил модули угловой формы в импорт моего модульного теста в beforeEach, один из них — FormModule (по angular), а другой — Custom FormModule.

Мне нужен только Custom FormModule, как только я удалил FormModule (по angular), проблема решена

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