Applying Validators manually in Angular 2 beta 17

We are currently working on a legacy project that needs to be maintained until the final version with angular-final is deployed.

Once we upgrade to the final version, I will be able to easily apply conditional Validators using:

this.myForm.controls['name'].setValidators(Validators.required)

Previously, the set method was not available and the only exposed thing was:

validator: ValidatorFN;

property on AbstractControl.

Based on this, I attempted to set it by just using:

this.myForm.controls['someControl'].validator(Validators.required)

However, this resulted in the following error being thrown:

"Cannot read property 'validationViolations' of undefined"

Answer №1

since a direct setter method is missing, you have the option to assign a new validator using this.myForm.controls['someControl'].validator=

Cheers and best regards

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

Ways to leverage Composite API in place of Mixin or Extends functionality

Currently, I am exploring the use of Vue3 for my project. One issue I am facing is that I need to create multiple components (SFC) with similar properties. I want to define these common properties using the composite API across all components, like so: con ...

Universal - Permissible data types for function and constructor arguments

In many statically typed languages, it is common to specify a single type for a function or constructor parameter. For example: function greet(name: string) { ... } greet("Alice") // works greet(42) // error TypeScript is an extension of JavaScri ...

Validator for IP addresses in Angular reactive forms

Hey there, I'm currently trying to implement a validator for an IP address in Angular. Strangely, even when I input an invalid IP address like 12.2.2.2..., the GUI indicates it is valid (as shown in the image). However, the console logs reveal that it ...

Using Typescript to typecast in D3.js

Utilizing the D3 graph example available here. I've defined my data object as shown below: interface ID3Data { age: string, population: number } const data: ID3Data[] = [ { age: "<5", population: 2704659 }, { age: "5-13", population: 4499 ...

How to Initialize Multiple Root Components in Angular 4 Using Bootstrap

We are working on a JQuery application and have a requirement to integrate some Angular 4 modules. To achieve this, we are manually bootstrapping an Angular app. However, we are facing an issue where all the Angular components are loading simultaneously wh ...

Adding parameters to Angular HTML element selector directives can be achieved by utilizing the directive's input properties

I have created a straightforward directive that targets an img element. @Directive( { selector: 'img' } ) export class ImageDirective { ... } Is there a way for me to add a boolean parameter to this directive? @Input() enabled: boolean = fals ...

Utilizing external applications within Angular applications

I have the task of creating a user interface for clocker, a CLI-based issue time tracker. Clocker functions as a stand-alone node.js application without any programming interface. To begin tracking time for an issue labeled 123, the command would typically ...

implementing an event listener in vanilla JavaScript with TypeScript

Can anyone help me figure out how to correctly type my event listener in TypeScript + Vanilla JS so that it has access to target.value? I tried using MouseEvent and HTMLButtonElement, but I haven't been successful. const Database = { createDataKeys ...

Angular 14 debug error: Incorrect base path setting

Whenever I go for a run, I have to specify a starting point such as /pis/ ng serve --serve-path /pis/ Even after following these instructions, nothing seems to load. Can anyone lend a hand with setting a starting point in the ng serve process? ...

Ran into an issue while executing ng build --prod: The JavaScript heap has run out of memory

After executing ng build --prod, I encounter the error below. What steps can I take to resolve this issue? FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory ...

Encountering a 504 Gateway Timeout error while attempting to send a POST request to an API route in a NEXT.JS application that

I encountered a 504 error gateway timeout when attempting to post a request to api/webhooks, and in the Vercel log, I received a Task timed out after 10.02 seconds message. This code represents a webhook connection between my clerk and MongoDB. [POST] [m ...

Apply a specific style to the initial element generated by *ngFor

My current method for displaying a certain number of * characters is utilizing the code snippet below: <div *ngFor="let line of lines; let i=index">*</div> I am interested in applying a margin only to the first element. The margin value sh ...

Guide to utilizing the Angular Material 2 documentation without an internet connection

Is there a way to access the Angular Material 2 documentation offline? I would like to have it available without needing an internet connection. What alternatives or solutions are there for this? ...

Issues with Angular and Node Frameworks

Recently, I've been diving into learning Angular but have hit a roadblock with an error related to Angular. Here's the issue: I'm using Ubuntu 18.04 and installed the latest version of Node.js via nvm. However, I seem to have "two" nodes in ...

What steps can be taken to address the build problem with Angular version 13?

Encountering a problem while working with Angular 13: https://i.sstatic.net/CbAUhh6r.png Attempting to build using ng build --configuration=test, however facing errors as mentioned above. Interestingly, if I remove the reference to bootstrap.min.css in t ...

Creating a subtype in typescript involves specifying values for certain fields and getting rid of any optional members in the type definition

interface Person{ name:string, age:number, gender?:string } interface Employee extends Person{ name='John Doe', age:number } I am trying to achieve the above structure for a person and employee in TypeScript. I am also curious if something simi ...

Is it possible to obtain the return type of every function stored in an array?

I'm currently working with Redux and typesafe-actions, and I am trying to find a way to automatically generate types for the actions in my reducer. Specifically, I want to have code completion for each of the string literal values of the action.type p ...

I am looking to update my table once I have closed the modal in Angular

I am facing an issue with refreshing the table in my component using the following function: this._empresaService.getAllEnterprisePaginated(1);. This function is located in my service, specifically in the modal service of the enterprise component. CODE fo ...

Angular 5 offers the ability to incorporate dynamic checkbox input into your application

Here is my code snippet: <input [type]="'checkbox'" [(ngModel)]="inputValue"> <p>Value: {{ inputValue }}</p> I'm puzzled as to why the value in inputValue remains unchanged. Can anyone shed light on this? I am unable to ...

Encountering an issue while attempting to install Font Awesome free

I encountered the following error: npm ERR! code E401 npm ERR! Unable to authenticate, need: Basic realm="https://npm.fontawesome.com/",service="npm.fontawesome.com" npm ERR! A complete log of this run can be found in: npm ERR! C:& ...