'MinValidator'既不是'ComponentType'也不是'DirectiveType'

问题描述

我正在尝试用angular9制作一个应用程序，在那里我有一个“产品创建”表格。

我正在尝试使用ng2-validation进行验证。

我已经在app.module.ts中导入了自定义表单模块，并将其注册到了imports数组中。

但是在我的模板中使用验证器时，它将引发以下错误-

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:"my/orders",component:MyOrdersComponent,canActivate:[AuthGuardService]},{path:"check-out",component:CheckOutComponent,{path:"order-success",component:OrderSuccessComponent,{path:"admin/products",component:ManageProductsComponent,canActivate:[AuthGuardService,AdminAuthGuardService]},{path:"admin/products/new",component:ProductFormComponent,{path:"admin/orders",component:ManageOrdersComponent,])
    
  ],providers: [AuthServiceService,AuthGuardService,AdminAuthGuardService,CategoryService],bootstrap: [AppComponent]
})
export class AppModule { }

product-form-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>

解决方法

<input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10"/>
<p *ngIf="field.errors?.min">error message</p>

您是否尝试过这种[[ngModel）] =“ model.field”丢失