Angular: Incorporating a custom validation function into the controller - Techniques for accessing the 'this' keyword

I'm currently working on implementing a custom validator for a form in Angular. I've encountered an issue where I am unable to access the controller's this within the validator function.

This is the validator function that's causing trouble:

validateSuccessShortName(control: AbstractControl) {
      // Unable to read this.randomProp, as this is undefined
      if (control.value.length > this.randomProp.length) {
        return {value: control.value};
      }
      return null;
    }

For a demonstration of the problem, check out this STACKBLITZ.

Is there a mistake in my implementation or is it simply not achievable within the Angular framework?

javascriptangulartypescript

Answer №1

https://example.com/edit/sample-project?embed=1&file=pages/home/home.ts

To enhance future developments, it is recommended to consolidate all validation processes into a separate file. Additionally, the first parameter for each function should be a configuration object rather than depending on 'this' keyword.

Update 

this.validateSuccessShortName.bind(this)
to ensure proper context within your function.

shortName: new FormControl('', [
        this.validateSuccessShortName.bind(this)
])

Answer №2

Your Angular validator is not correctly referencing the component property. To resolve this issue, you should ensure that you bind this to the validator.

export class HomePage {
    private arr: Array<any>;
    private thevalue: string;
    public thisForm: FormGroup;
    public randomProp: string;
  constructor(
    private modal: ModalController,
    public navCtrl: NavController) {
    this.thevalue = "Initial value";
    this.randomProp = "This is a random property";
    this.thisForm = new FormGroup({
      shortName: new FormControl('', [
        this.validateSuccessShortName.bind(this)
      ])
    });
  }
  validateSuccessShortName(control: AbstractControl) {
      if (control.value.length > this.randomProp.length) {
        return {value: control.value};
      }
      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

Is there a way to duplicate items similar to MS Word by using a combination of ctrl + mouse click +

In my fabricjs application, I currently clone an object by clicking ctrl + left mouse click on it, which works fine. However, I would like to be able to clone the object in a similar way to MS WORD, by using ctrl + click + drag. Has anyone achieved this f ...

javascriptphpjqueryhtml5-canvasfabricjs

The property "props" is not recognized within the context of type PropType

Within my component, I am receiving a prop ("author") from a parent component. Although I have defined the prop type as "AuthorProps", I am getting an error stating Property 'author' does not exist on type 'AuthorProps', even though the ...

reactjstypescriptnext.js

Where can variables be found within the scope?

Would it be possible to automatically identify all variables within a specific scope? For example: var localScope = function() { var var1 = "something"; var var2 = "else..."; console.log(LOCAL_SCOPE); }; and have LOCAL_SCOPE return an object ...

javascriptvariablesscopelocaldetect

The init function of the controller in Ext JS version 4.1.0 is not being executed

Recently, I started learning javascript and extjs, and while following the extjs 4.1 MVC Architecture tutorial, I ran into an issue. Everything was working fine initially, but when I tried to add the controller to the application, something went wrong. Bot ...

javascriptextjsjavascript-frameworkextjs4.1extjs-mvc

Issue with Mjpg paparazzo.js functionality not functioning as expected

I am currently exploring alternative methods to view my security cameras without relying on browser support for mjpg streaming. I have come across Paparazzo.js, which appears to be a promising solution that I want to experiment with: https://github.com/rod ...

javascriptjqueryip-cameramjpeg

The declaration file for 'autobind-decorator' is missing in TypeScript and cannot be located

Having a bit of trouble with my Typescript project. I'm trying to import the 'autobind-decorator' package, but I hit a roadblock. When compiling, I keep running into this error: cannot find declaration file for 'autobind-decorator&ap ...

node.jstypescriptnpm

Error code 400 encountered during an HTTP POST request - issue stems from incorrect design of views and serializers

I keep encountering the following error: POST http://127.0.0.1:8000/api/creator_signup/ 400 (Bad Request) Every time I try to send data from my AngularJS application to my Django backend. When making a POST request, I used the following code (https://i. ...

javascriptpythonangularjsdjango

Implement the maskmoney library in your input fields

In the form below, I am automatically adding inputs using a JavaScript function like this: $('.Preco1').maskMoney({ decimal: '.', thousands: ' ', precision: 2 }); $('.Preco1').focus(); $('#sub').maskMon ...

javascripthtml

The color syntax in the text editor of Visual Studio 2022 is being lost when casting an interface

After attempting to cast an interface, the entire code turns white. let object : someInterface = <someInterface> someUnknownHapiRequestPayload View a screenshot of the text editor here I have already tried common troubleshooting steps such as updat ...

typescriptvisual-studiovisual-studio-2022

Transferring a value via AJAX that has been modified by a previous AJAX call

In my form, users input values which are used to calculate a result. The calculation is performed through AJAX calls triggered by onchange events on the user-edited fields. This process works as expected. However, there is a hidden field that also gets up ...

javascriptajax

What is the best way to match the minimum height of one div to the height of another div?

I need to dynamically set the minimum height of #wrapper equal to the height of #sidebar, but the height of #sidebar is not fixed. Here is my attempt at achieving this with JavaScript: var sidebarHeight = jQuery('#sidebar').height; jQuery(&apos ...

javascriptjquery

Assigning properties in html

When the status is equal to "complete", I need to disable an input tag based on a certain condition. One way to achieve this using javascript is by utilizing the setAttribute method. var element = document.querySelector("input"); element.setAttribute("d ...

javascripthtmlangularjs

Encountered an error: Unable to access the 'event' property as it is undefined in Laravel 5.3

I'm a beginner with Laravel. Here's my script code that I'm using to retrieve a location in my input field: <script type="text/javascript> google.maps.event.addDomListener(window, 'load', function () { ...

javascriptphpjquerylaravel

Styling Input elements with a unified border in Bootstrap

[Issue Resolved] I have been working on setting a single border between multiple inputs inside a form-group in Bootstrap. Currently, the border is only visible when the input is not focused and it is the last one. However, my expectation is for the bo ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Steps to access a Request object within a Controller

I am currently working with Express and Typescript, utilizing Controllers for managing requests. In an attempt to create a BaseController that includes the Request and Response objects for each request, I wrote the following code snippet. However, it see ...

node.jstypescriptexpress

What is the process for searching a specific column in a Vuetify v-data-table that is not included in the headers?

Header for Product Data: headers: [ { text: "Product Name", value: "name" }, { text: "Quantity", value: "quantity" }, { text: "Price", value: "price" }, { text: "Orders", value: &quo ...

javascriptvue.jsvuejs2vuetify.jsv-data-table

Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then? For example: <div class="field-1"></div> ...

javascriptjqueryhtmlcss

What advantages does declaring a backing model "class" that closely resembles the GraphQL "Type" bring when using GraphQL?

I appreciate the Universal Relay Boilerplate for its meticulous organization and thoughtful structure compared to other boilerplates. It seems like they really put a lot of effort into ensuring everything is well-planned from the start, which is not always ...

javascriptreactjsgraphqlrelay

Managing the jQuery.noConflict function

Upon review, I noticed that the scripts I inherited start like this: var $j = jQuery.noConflict(); The purpose behind this code is not clear to me. While I understand the intent is to avoid conflicts, I am uncertain about the specific conflict it aims to ...

javascriptjquery

Sharing socket data between different namespaces in Socket.ioSocket.io enables the

Is there a solution to sharing data set in a socket in one namespace and accessing it on another namespace? While I understand that data can be attached to the socket object itself, a problem arises when trying to access the data in a different namespace. ...

javascriptnode.jssocket.io