I am currently working on an Angular application where I have integrated the FormsModule from '@angular/forms' in my app.module.ts. However, despite this, I keep encountering the error message No provider for ControlContainer.
Error log:
Uncaught Error: Template parse errors:
No provider for ControlContainer ("
<span>Product Catalog</span>
</h4>
[ERROR ->]<form [formGroup]="productSearchForm" (ngSubmit)="onSubmit()" class="d-flex md-form justify-content-c"): ng:///ViewsModule/ProductCatalogComponent.html@8:8
No provider for NgControl ("orm" (ngSubmit)="onSubmit()" class="d-flex md-form justify-content-center form-inline">
[ERROR ->]<select class="custom-select mb-2 mr-sm-2 mb-sm-0" formControlName="f_categoryId">
<optio"): ng:///ViewsModule/ProductCatalogComponent.html@9:12
No provider for NgControl ("
</select>
[ERROR ->]<input type="search" formControlName="f_productDescription" placeholder="Seach the products" aria-lab"): ng:///ViewsModule/ProductCatalogComponent.html@16:12
<!-- Additional template parsing errors go here -->
In my code snippets,
product-catalog.component.html
<div class="card mb-4 wow fadeIn">
<div class="card-body d-sm-flex justify-content-between">
<h4 class="mb-sm-0 pt-3">
<span>Product Catalog</span>
</h4>
<form [formGroup]="productSearchForm" (ngSubmit)="onSubmit()" class="d-flex md-form justify-content-center form-inline">
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" formControlName="f_categoryId">
<option selected>Choose Category</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<input type="search" formControlName="f_productDescription" placeholder="Seach the products" aria-label="Search" class="form-control">
<button type="submit" class="btn btn-primary"> <i class="fa fa-search"></i></button>
</form>
</div>
</div>
product-catalog.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { InventoryService } from '../../_services/inventory.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ProductView } from '../../_models/product-view';
import { Category } from '../../_models/category';
import { OrderService } from '../../_services/order.service';
// TypeScript component logic goes here
view.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// Other module imports and declarations go here
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
// Main AppModule configuration and setup
If anyone can assist me with resolving this issue, it would be greatly appreciated. Thank you!