Angular 5: Module not found: Error: Can't resolve '@angular/forms/src/validators'

15,558

Import just from @angular/forms

import { 
      ValidatorFn,
      Validator, 
      AbstractControl, 
      FormControl, 
      NG_VALIDATORS 
} from '@angular/forms';
Share:
15,558
Abhishek Vyas
Author by

Abhishek Vyas

Updated on July 31, 2022

Comments

  • Abhishek Vyas
    Abhishek Vyas almost 2 years

    I am trying to create a custom validator using directive but getting below error.

    ERROR in ./src/app/CustomValidators/white-space-validator.directive.ts
    Module not found: Error: Can't resolve '@angular/forms/src/validators' in 'D:\Angular\Admin\src\app\CustomValidators'
    resolve '@angular/forms/src/validators' in 'D:\Angular\Admin\src\app\CustomValidators'
      Parsed request is a module
      using description file: D:\Angular\Admin\package.json (relative path: ./src/app/CustomValidators)
        Field 'browser' doesn't contain a valid alias configuration
      after using description file: D:\Angular\Admin\package.json (relative path: ./src/app/CustomValidators)
        resolve as module.....
    

    Code in directive file:

    import { Directive } from '@angular/core';
    import { ValidatorFn, Validator } from '@angular/forms/src/directives/validators';
    import { AbstractControl, FormControl } from '@angular/forms/src/model';
    import { NG_VALIDATORS } from '@angular/forms/src/validators';
    
    @Directive({
      selector: '[whiteSpace][ngModel]',
      providers: [
        { provide: NG_VALIDATORS, useExisting: WhiteSpaceValidatorDirective, multi: true }
      ]
    })
    
    export class WhiteSpaceValidatorDirective  {
      validator : ValidatorFn;
    
      constructor() { 
        this.validator = checkWhiteSpaces();
      }
    
      validate(c: FormControl){
        return this.validator(c);
      }
    }
    
    function checkWhiteSpaces(): ValidatorFn {
      return (c: AbstractControl) => {
        let isValid = c.value.trim().length > 0 ? true : false;
        if (isValid) {
          return null;
        }
        else {
          return {
            whiteSpace: { valid: false }
          }
        }
      }
    }
    

    Versions of Package I am using:

    • Angular CLI: 1.5.5 Node: 8.2.1 OS: win32 x64 Angular: 5.1.2 ... animations, common, compiler, compiler-cli, core, forms ... http,
      language-service, platform-browser ... platform-browser-dynamic,
      router @angular/cli: 1.5.5 @angular-devkit/build-optimizer: 0.0.36 @angular-devkit/core: 0.0.22 @angular-devkit/schematics: 0.0.42
      @ngtools/json-schema: 1.1.0 @ngtools/webpack: 1.8.5
      @schematics/angular: 0.1.11 @schematics/schematics: 0.0.11
      typescript: 2.4.2 webpack: 3.8.1

    Any help ?