«MinValidator» не является ни «ComponentType», ни «DirectiveType».

Я пытаюсь создать приложение в 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>

person Kshitiz Sharma    schedule 18.08.2020    source источник


Ответы (1)


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

Вы пробовали вот так [(ngModel)]=model.field отсутствует

person ShivShankar Namdev    schedule 18.08.2020
comment
Да. Я тоже так пробовал. Но у него все еще есть та же ошибка. - person Kshitiz Sharma; 18.08.2020