Angular 5: Issue with Module Resolution: Unable to locate '@angular/forms/src/validators'

Struggling to develop a unique validator using a directive, but encountering the following 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.....

Snippet from the 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 }
      }
    }
  }
}

The versions of packages being used:

  • 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

In need of assistance.

Answer №1

Only import from @angular/forms

import { 
      ValidatorFn,
      Validator, 
      AbstractControl, 
      FormControl, 
      NG_VALIDATORS 
} from '@angular/forms';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for converting numerical values in a JSON object to strings within a TypeScript interface

{ "id": 13, "name": "horst", } in order to interface A { id: string; name: string; } When converting JSON data of type A to an object, I expected the conversion of id from number to string to happen automatically. However, it doesn' ...

Update Angular2 application's routes dynamically

Currently, I am developing an application that involves dynamically loading modules based on JSON data. I am looking to modify the app's routing depending on the user's permission to view certain modules. Can you provide guidance on how to accomp ...

Paths: Integrate a variety of components along with essential information

With 3 components in hand, everything works smoothly when I run them on AppComponent: <app-sections #appSection></app-sections> <app-form #mainForm [section]="appSection.currentSection"></app-form> <app-match [bestMatchHTMLEleme ...

The 'Access-Control-Allow-Origin' header can be found on the resource that was requested

I'm facing an issue while trying to connect my .net core API to an Angular application. Whenever I attempt to do so, I encounter the following error: Access to XMLHttpRequest at 'https://localhost:44378/api/recloadprime' from origin 'h ...

Is it possible to verify if an object matches a type without explicitly setting it as that type?

In order to illustrate my point, I believe the most effective method would be to provide a code snippet: type ObjectType = { [property: string]: any } const exampleObject: ObjectType = { key1: 1, key2: 'sample' } type ExampleType = typeof ...

"Can anyone provide guidance on how to customize form fields in Angular Material 16, such as removing borders, changing colors, and other

After upgrading my angular material to version 16, all the UI elements I had in place became distorted due to the introduction of mdc. The CSS code I was using before to customize elements like this: ::ng-deep .mat-form-field-appearance-outline .mat-form- ...

An error is triggered by the EyeDropper API stating that 'EyeDropper' has not been defined

I am trying to utilize EyeDropper for an eyedropper function in my project that uses Vue2 + Ts. Here is the code snippet: <div v-if="haveEyeDropper" @click="handleClickPick" > <i class="iconfont icon-xiguan"> ...

Transform object into JSON format

Is there a way to transform an object into JSON and display it on an HTML page? let userInfo = { firstName: "O", lastName: "K", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b44476b445b05484446">[ema ...

The method window.getComputedStyle retrieves the CSS max-height property containing an unresolved calc() function

Has anyone encountered a challenge with a function related to Angular in their project? Here is a snippet of the code causing issues: console.log(window.getComputedStyle(this.frontLayer.nativeElement).maxHeight); And within the component template: <di ...

What is the best method for transitioning to a new page in React Native using Ignite Bowser?

Recently I ventured into the world of React Native with Ignite Bowser. My current project involves building a React Native app using Ignite Bowser. At the start of my app, there's a welcoming screen that pops up. It features a 'continue' bu ...

The property 'matCellDefTrackBy' cannot be bound to 'mat-cell' as it is not recognized as a valid property

Wondering how to implement trackBy in Angular Material? I encountered the error message below: Can't bind to 'matCellDefTrackBy' since it isn't a known property of 'mat-cell' html: <mat-table [dataSource]="data" ...

Mastering the art of mocking modules with both a constructor and a function using Jest

I'm a Jest newbie and I've hit a roadblock trying to mock a module that includes both a Class ("Client") and a function ("getCreds"). The Class Client has a method called Login. Here's the code snippet I want to test: import * as sm from &ap ...

ReactJS Redux Provider fails to accept the store

I'm currently in the process of migrating my redux store from using "createStore" to "configureStore" due to the deprecation of "createStore". I am working with ReactJS 17 and TypeScript, with the following versions of Redux / Redux dependencies: &quo ...

Which is more efficient: Storing the database as a private member variable in Ionic 3 SQLite or creating a new database for every query

Here's a question for you - in the context of Ionic 3, what would be the preferable approach: keeping the opened database as a private member variable within a database provider class, or calling create every time a query is made to the database? For ...

transformation of categorized unions in software development

Experimenting with routing-controllers and its built-in class-transformer feature, I tried creating an interface for executing a search query based on either a location id or location coordinate. My aim was to utilize a discriminated union as a body parame ...

The graph that should appear in Angular2 with ng2-charts is missing

I'm currently working on a project that requires implementing charts using Angular2 (version 2.4.8). I am utilizing ng2-charts (version 1.5.0) and the corresponding version of chart.js is 2.5.0. Initially, I started by copying an example code from the ...

Changing the dropdown value by clicking the previous and next buttons in Angular 2

I need to implement a feature in Angular 2 where the default date displayed in a dropdown is the current year. Additionally, when the "Prev" button is clicked, the selected year value in the dropdown should decrease by one. // Our root app component imp ...

The theming feature in Angular 5 with Bootstrap 4 and Bootswatch seems to be malfunctioning

Having trouble implementing bootswatch themes with angular 5 and bootstrap 4? I've added the following to styles.scss: @import "~bootswatch/dist/cerulean/variables"; @import "~bootstrap/scss/bootstrap"; @import "~bootswatch/dist/cerulean/ ...

Execute a function once an observable variable has been successfully initialized

I'm currently putting together a chat application using socket.io in Angular. I've encountered an issue where I can't seem to execute a particular code or function right after an observable variable is initialized through subscription. The i ...

Retrieve a formatted item from a JSON document

Within my Next.js project, I have implemented a method for loading translations and passing them into the component. Here is an example: import "server-only"; import i18nConfig from "../../i18n-config"; const dictionaries = { en: () ...