Having issues with an Angular reactive form that includes a custom form-level validator and the 'blur' updateOn option?

Having issues combining the following:

  • angular reactive form
  • custom validator at form level (cross-field validator)
  • usage of the 'updateOn' option set to 'blur'

A demonstration of the problem can be found in this simple stackblitz:

https://stackblitz.com/edit/angular-url9uc?devtoolsheight=33&file=src/app/app.component.ts

CASE 1 : KO

'updateOn' option set to 'blur'.

Specific field validators (required / email) work only when focus is lost on the input text field. However, the cross-field global validator (checking that fields are the same) does not activate!

CASE 2 : OK

'updateOn' option is undefined.

Specific field validators (required / email) react in real time as values change in the input text field. The cross-field global validator also works correctly!

I suspect there might be an issue with my custom validator or how I am using it, but I'm struggling to pinpoint the exact problem...

Any assistance would be greatly appreciated! Thank you!

javascriptangulartypescriptvalidationangular-reactive-forms

Answer №1

Upon reviewing your stackblitz, it appears that in both your buildForm() and buildForm2() functions, you are utilizing a deprecated overload of the formbuilder.group() method with this signature:

(controlsConfig: { [key: string]: any; }, options: { [key: string]: any; })

It is recommended to switch to the type-safe version instead:

(controlsConfig: {
    [key: string]: any;
}, options?: AbstractControlOptions)

What does this mean practically? The configuration section of your form should use validators instead of validator (noting the plural form):

validators: CustomValidator.equalValueValidator("email", "confirmEmail"),

By making this adjustment, everything will function as expected and the updateOn aspect will be properly utilized for the validators.

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

When a jQuery click event is triggered, the event.target will return the child element that was clicked within the

When I have a jQuery click event assigned to a hyperlink that contains an image, each with separate ids, I expect clicking the hyperlink to trigger the code event.target.id, returning the hyperlink's id. However, it actually returns the image's i ...

javascriptjqueryhtmleventsjquery-events

Using Vue to append elements that are not part of the loop

While looping over a table row, I realized that each of the table rows should be accompanied by another table row containing additional data from the loop. Unfortunately, I am struggling to insert <tr class="data-spacer"></tr> <tr& ...

javascriptvue.js

Updating a database seamlessly via a dropdown menu without having to refresh the entire webpage

Before we proceed, please take a look at the following code: $(document).ready(function() { $("#alternatecolor [type=button]").each(function() { $(this).on('click', function() { btnObj = $(this); rowId = $(this).attr("rowId") ...

javascriptphpmysql

The parameter 'unknown[]' cannot be assigned to the type 'OperatorFunction'

component.ts initialize() method explains The error message says 'Argument of type 'unknown[]' is not assignable to parameter of type 'OperatorFunction<unknown[], unknown>'. Type 'unknown[]' does not match the si ...

angulartypescriptionic-frameworkrxjsangularfire

Verifying if a particular track is currently playing in the HowlerJS playlist

I am currently experimenting with a HowlerJS playlist code and would like to create a button that can detect if a specific song in the playlist is playing. When this button is clicked, I want it to hide a certain line of text. However, my knowledge on this ...

javascriptjqueryhtml5-audioweb-audio-apihowler.js

Utilize TypeScript Compiler (tsc) without the need for global installation via

Currently, I am tackling a project that needs to be delivered to a group of individuals. This project is written in TypeScript, requiring them to execute the command tsc for compilation. The issue arises when I run this command following the execution of ...

typescriptnpmnpm-installtsc

There seems to be an issue with posting JSON data correctly

Currently, I am attempting to include an object with numerous attributes within it. This is the object I am trying to use with $.post: ({"fname" : fname, "lname" : lname, "gender" : gender, "traits" : { "iq" : inte ...

javascriptjqueryjsonapipost

Methods for reloading the requirejs module

There are two modules: settingmap.js var settingMap = { scWidth : [4000, 6000, 8000], scHeight : [5000, 7000, 9000], bxWidth : [100, 90, 80], bxHeight : [100, 90, 80], totalTime : [50, 40, 30], level : [1, 2, 3], boxColor : [&a ...

javascriptnode.jsrequirejsjs-amd

Dropdown selection in Angular 4 with Firebase integration

I'm currently using Angular 4 in conjunction with Firebase to create a dropdown selector for a list of properties. Upon selecting a property from the dropdown menu, I expect the location of that property to be displayed in another input field below. ...

htmlangularjsangularfirebasefirebase-realtime-database

Employing a section of an intricate map found in the Stores React platform

Take a look at this data stored in Zustand or any other store. productMap: { 'product-id-abc': { info: { name: 'Gmail', url: 'gmail.com', api: 'localhost:8080' }, endpo ...

reactjstypescriptreduxreact-hookszustand

Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...

javascripthtmljquerycssbootstrap-5

Turn off all animations for a specific div or HTML page

Whenever I add an item to a div, there's this strange flashing animation happening. It's like a blink or flash that updates the div with new data. I'm not entirely sure if it's a jQuery animation or not. Is there any way to disable all ...

javascriptjqueryanimationjquery-uijquery-animate

What sets apart extending and intersecting interfaces in TypeScript?

If we have the following type defined: interface Shape { color: string; } Now, let's explore two different methods to add extra properties to this type: Using Extension interface Square extends Shape { sideLength: number; } Using Intersection ...

typescripttypesintersectionextends

Tips for showcasing the information from a JSON document in React

I have a JSON file stored statically in my public directory and I'd like to show its content within a React component (specifically NextJS). The goal is to simply render the JSON as it is on the page. import data from '../../public/static/somedat ...

jsonreactjstypescriptreact-reduxnext.js

Parsing error encountered while trying to handle an unexpected token at line 214, character 33. It appears that an appropriate loader is missing to process this particular file type

I've been developing a Typescript React project for the past few months without any issues. However, things took a turn yesterday when I decided to run npm audit fix and npm audit fix --force in order to address some security concerns that appeared ou ...

reactjstypescriptwebpackbabeljscreate-react-app

Steps to switch the primary audio input

Is there a way to change the default microphone of a client based on user selection? I can obtain the list of devices using the enumerateDevices promise, but how can 'Audio 40 USB' be set as the default microphone in this scenario? navigator.me ...

javascriptarraysaudio

Unexpected Undefined Return in Request Parameters

Hey everyone, I'm currently working on setting up a mock API server using a JSON file with some dummy data. The first route I created is functioning perfectly: const express = require("express"); const router = express.Router(); const data = requir ...

javascriptnode.jsjsonexpressmockserver

Error: Unable to install Angular on WSL due to permission denied for Node

Struggling to set up angular on WSL2, with node version 17.3.1 and npm version 8.3.0 already installed. Received an error when trying the command npm install -g @angular/cli: npm ERR! code 127 npm ERR! path /root/.nvm/versions/node/v17.3.1/lib/node_module ...

angularnpmangular-cliwindows-subsystem-for-linux

Tips for effectively utilizing Vuex to manage items within a Vuetify data table

I am currently sending an API request to retrieve an array of objects that has the following structure: returnedItems [ { name: 'Adam', age: '30', interest: 'Sports' }, ...

javascriptvue.jsvuetify.js

When using Angular $http.post, encountering issues with the 'Access-Control-Allow-Origin' header

I have developed two applications using nodejs and angularjs. The nodejs app contains the following code: require('http').createServer(function(req, res) { req.setEncoding('utf8'); var body = ''; var result = '&a ...

javascriptnode.jsangularjsangularjs-service