web-dev-qa-db-fra.com

Aucun fournisseur pour ControlContainer - Angular 5

Je suis en train de convertir un modèle tiers acheté en une Angular 5, et vient de rencontrer une erreur. Je suis très nouveau sur Angular 5 (I Cependant, si vous connaissez bien AngularJS et ne comprenez pas ce qu’il essaie de me dire, il semble être lié à un bouton qui affiche/masque la barre de navigation supérieure.

Message d'erreur (du navigateur):

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

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

composant.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 (cela semble être une chose dont on parle beaucoup quand je recherche ceci sur Google, mais ce n'est pas le formulaire qui renvoie l'erreur.)

...
import { ReactiveFormsModule, FormControl, FormsModule } from '@angular/forms';
...
angularangular5angular-componentsangular-forms
15
Todd Davis

importer FormsModule en plus de ReactiveFormsModule

34
blazehub

Je ne sais pas pourquoi l'erreur semble pointer vers la balise d'ancrage en dehors de l'élément de formulaire, mais c'est l'élément de formulaire qui était à l'origine de l'erreur. L'ajout de FormGroup au formulaire a résolu le problème.

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

Importer FormsModule et ReactiveFormsModule dans le fichier views.module.ts (Fichier de module personnalisé) fonctionne pour moi:

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 { }
10
Govind Samrow