Encountering an issue with accessing a property in Angular's TypeScript module

I encountered an issue while trying to access a property of a static array that I created in a TypeScript class.

The error message I received is as follows:

ERROR TypeError: Cannot read property 'forbiddenProjectNames' of undefined

Below is the code snippet where I defined the array:

export class CustomValidator {

  private static forbiddenProjectNames = ['Test'];

  static forbiddenNames(control: FormControl): {[s: string]: boolean} {
    if (this.forbiddenProjectNames.indexOf(control.value) !== -1) {
      return { 'nameIsForbidden': true };
    } else {
      return null;
    }
  }

Any suggestions on how I can resolve this issue?

angulartypescript

Answer №1

When labeled as static, you have the ability to reference it using this syntax: 

CustomValidator.forbiddenProjectNames

Answer №2

Here is my approach to solving the problem:

 static checkForbiddenNames(control: FormControl): {[key: string]: boolean} {
    if (CustomValidator.forbiddenProjectNames.includes(control.value)) {
      return { 'projectNameIsForbidden': true };
    } else {
      return null;
    }
}

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 displaying data by pivoting on a column value within a table using Angular's mat-table feature

I am working with a dataset that resembles the sample data provided below: [{ "testDisplayName": "Test_Name_1", "data": { "metrics": [ { "metricValue": -0.18, ...

angularangular-material-table

Using Angular Material to create a data table with a fixed footer and paginator feature

I am facing a challenge with displaying the sum of rows data in the footer section of an Angular Material Table that has fixed footer and header, as well as a paginator. How can I calculate the sum of rows data to show in the footer? https://i.sstatic.net/ ...

angularangular-material

What is the method for obtaining the union type of interface values (including string enums)?

How can I achieve the following ? Given : enum FooEnum1 { Foo = "foo", }; enum FooEnum2 { Foo = 1, }; interface FooInterface { foo1 : FooEnum1, foo2 : FooEnum2, foo3 : string, foo4 : number, }; I am interested in cre ...

typescripttypescript-typings

What is the best way to conceal part of a chart or a div in Angular?

I have a large chart that I need to showcase on my website, but due to its size it would take up too much vertical space and potentially overwhelm the user upon their first visit. My goal is to provide a preview of the chart, similar to an excerpt of text ...

htmlcssangularchart.js

Information about the HTML detail element in Angular 2 is provided

Hi, I'm curious if there's a way to know if the details section is open or closed. When using <details (click)="changeWrap($event)">, I can't find any information in $event about the status of the details being open. I am currently wor ...

htmlangulartypescriptevents

Utilizing web components in React by solely relying on a CDN for integration

I have a client who has provided us with a vast library of UI elements that they want incorporated into our project. These elements are stored in javascript and css files on a CDN, and unfortunately I do not have access to the source code. All I have at my ...

javascripthtmlreactjstypescriptweb-component

Array of options with specified data types in Props interface

Trying to implement options as props for styling a button component in Astro. Still learning TypeScript. Encountering the error message: Generic type 'Props<style>' requires 1 type argument(s). Below is the code snippet: --- import type { H ...

typescriptastrojs

What is the best way to have text wrap around an icon in my React application?

I am facing an issue while trying to display the note description over the trash icon in a React app. I have tried various methods but can't seem to achieve the desired effect. Can anyone guide me on how to get this layout? Here is what I intend to a ...

javascripthtmlcssreactjstypescript

Dealing with a 500 (Internal Server Error) error when using the HttpClient library

My implementation using HttpClient is as follows: file: app.component.ts this.appService.fetchObject(param) .subscribe((response: ObjectDTO) => { // Perform certain actions }, error => { var ...

angularhttpclient

Experience the convenience of lazy-loading in Angular Ivy: The InjectionToken ng-select-selection-model provider is not available

Issue Description I have integrated angular's IVY compiler and lazy-loading feature according to the tutorial found here: However, when I attempt to lazy-load a module and add an instance of a component to my application, the ng-select element is not ...

angularlazy-loadingangular-ngselectangular-ivy

I am having trouble getting the bs-stepper to function properly within my Angular project

I am currently facing issues with the bs-stepper module in my Angular code. It is not functioning as expected and is throwing errors. Here is a snippet of my code: export class FileUploadProcessComponent implements OnInit { import Stepper from 'b ...

angulartypescriptuistepper

Having trouble launching the freshly developed Angular app

I'm encountering an issue with my newly created app - I can't seem to launch it. Error: The loader “C:/C#/Angular/my-app/src/app/app.component.css” is not providing a string as expected. https://i.sstatic.net/6Xjwd.png https://i.sstatic.ne ...

javascriptangulartypescriptangular-cli

Issues with loading image assets on GitHub Pages after deploying in production with Angular2, Angular-cli, and Webpack

This is NOT a repeated query: This particular issue presents the problem, but it pertains to a project not built with angular-cli like mine does, hence a webpack.config file is absent. While my described dilemma involves accurately configuring the base_u ...

angularwebpackgithub-pagesangular-cli

Node_modules seem to be missing

After completing the TypeScript 101 QuickStart tutorial using Visual Studio 2015 and Node Tools for Visual Studio, I attempted to import the 'winston' npm module. However, no matter what path I specify, Visual Studio indicates that it cannot loca ...

node.jstypescriptvisual-studio-2015

The 'setParent' property is undefined and cannot be read

In my Angular 6 project, I am utilizing a reactive form which includes a table in a child component: <div formArrayName="_server"> <table id="_server" class="table table-striped table-bordered"> <thead> <tr> ...

angularangular6angular-reactive-forms

Issue with updating pages in Ionic/Angular applications

Using Ionic 5 and Angular, my page is bound to an object (Person). When I select data from WebSQL, my object gets updated but the page does not reflect this change until I interact with another control or menu. // This code is in my component inside a c ...

angularionic-frameworkweb-sql

The TypeScript compiler is tolerant when a subclass inherits a mixin abstract class without implementing all its getters

Update: In response to the feedback from @artur-grzesiak below, we have made changes to the playground to simplify it. We removed a poorly named interface method and now expect the compiler to throw an error for the unimplemented getInterface. However, the ...

typescript

Invoke a function in Playwright exclusively when the test title includes a specific @tag

After years of utilizing Selenium, SpecFlow, NUnit, and other testing tools, I have recently delved into Playwright with TS. My goal is to interact with the AzureDevOps API to mark tests as automated only if they contain a specific tag in the test title (e ...

typescriptazure-devopsplaywright

What is the process for being directed to the identity server login within an Angular application?

Immediately redirecting users to the identity server upon accessing the application is my goal. Currently, there is a login button that directs users to the ID server with a click, but I want to eliminate this button and have the redirection occur automati ...

angularidentityserver4

What is the best way to send an array to the @input() of a separate component in Angular?

Successfully passed my array to the first @Input() and displayed its contents. Now, facing a challenge where I need to pass data from the first @Input() to the second @Input() and display it. Still navigating my way through Angular and learning the ins a ...

angular