Я пытаюсь создать приложение в angular9, где у меня есть форма «Создание продукта».
Я пытаюсь реализовать проверку с помощью ng2-validation.
Я импортировал модуль пользовательских форм в app.module.ts и зарегистрировал его в массиве импорта.
Но при использовании валидаторов в моем шаблоне выдает следующие ошибки:
core.js:6241 ERROR Error: Uncaught (in promise): Error: 'MinValidator' is neither 'ComponentType' or 'DirectiveType'.
Error: 'MinValidator' is neither 'ComponentType' or 'DirectiveType'.
at extractDirectiveDef (core.js:1964)
at Array.map (<anonymous>)
at def.directiveDefs (core.js:1926)
at createTView (core.js:12307)
at getOrCreateTComponentView (core.js:12252)
at createRootComponentView (core.js:26462)
at ComponentFactory$1.create (core.js:34074)
at ViewContainerRef.createComponent (core.js:15711)
at RouterOutlet.activateWith (router.js:9149)
at ActivateRoutes.activateRoutes (router.js:4107)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:41645)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
at invokeTask (zone-evergreen.js:484)
at ZoneTask.invoke (zone-evergreen.js:469)
app.module.ts
import { CategoryService } from './services/category.service';
import { AdminAuthGuardService } from './services/admin-auth-guard.service';
import { AuthServiceService } from './services/auth-service.service';
import { MyOrdersComponent } from './my-orders/my-orders.component';
import { LoginComponent } from './login/login.component';
import { ProductsComponent } from './products/products.component';
import {FormsModule} from '@angular/forms';
import { RouterModule } from '@angular/router';
import { environment } from 'src/environments/environment.prod';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SoppingCartComponent } from './sopping-cart/sopping-cart.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { CheckOutComponent } from './check-out/check-out.component';
import { OrderSuccessComponent } from './order-success/order-success.component';
import { ManageProductsComponent } from './admin/manage-products/manage-products.component';
import { ManageOrdersComponent } from './admin/manage-orders/manage-orders.component';
import { AuthGuardService } from './services/auth-guard.service';
import { ProductFormComponent } from './admin/product-form/product-form.component';
import {CustomFormsModule} from 'ng2-validation';
@NgModule({
declarations: [
AppComponent,
SoppingCartComponent,
NavbarComponent,
HomeComponent,
CheckOutComponent,
OrderSuccessComponent,
ManageProductsComponent,
ManageOrdersComponent,
ProductFormComponent
],
imports: [
AngularFireModule.initializeApp(environment.firebase),
BrowserModule,
AppRoutingModule,
AngularFireDatabaseModule,
AngularFireAuthModule,
FormsModule,
CustomFormsModule,
RouterModule.forRoot([
{path:"",component:HomeComponent},
{path:"shopping-cart",component:SoppingCartComponent},
{path:"login",component:LoginComponent},
{path:"products",component:ProductsComponent},
{path:"shopping-cart",component:SoppingCartComponent},
{path:"my/orders",component:MyOrdersComponent, canActivate:[AuthGuardService]},
{path:"check-out",component:CheckOutComponent, canActivate:[AuthGuardService]},
{path:"order-success",component:OrderSuccessComponent, canActivate:[AuthGuardService]},
{path:"admin/products",component:ManageProductsComponent, canActivate:[AuthGuardService,AdminAuthGuardService]},
{path:"admin/products/new",component:ProductFormComponent, canActivate:[AuthGuardService,AdminAuthGuardService]},
{path:"admin/orders",component:ManageOrdersComponent, canActivate:[AuthGuardService,AdminAuthGuardService]},
])
],
providers: [AuthServiceService, AuthGuardService, AdminAuthGuardService, CategoryService],
bootstrap: [AppComponent]
})
export class AppModule { }
форма-продукта-html
<div class="form-group">
<label for="price">Price</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input #price="ngModel" type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)" name="price" ngModel required [min]="0">
</div>
<div class="alert alert-danger" *ngIf="price.touched && price.invalid">
<p *ngIf="price.errors.required">Price is required</p>
<p *ngIf="price.errors.min">error message</p>
</div>