購入したサードパーティのテンプレートをAngular 5アプリに変換していますが、エラーになりました。Angular 5(Iしかし、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';
...
FormsModule
に加えてReactiveFormsModule
をインポートします
エラーがフォーム要素の外側のアンカータグを指しているように見える理由はわかりませんが、エラーの原因はフォーム要素でした。 FormGroupをフォームに追加すると、問題が修正されました。
<form role="search" class="navbar-form-custom" [formGroup]="form">
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 { }