Encountering an issue while attempting to incorporate the confirmation email feature into a group setup, where an error is thrown indicating that only 1-2 arguments were anticipated

Issue

An error message "Expected 1-2 arguments but got 3. ts(2554)" is displayed when attempting to add a confirm email as the third argument.

I am currently working on an Angular 7 project where I am creating a register users form.

The problem arises when trying to validate and compare the user's email with the confirmation email in a Reactive form.

The function group does not allow for adding the argument for the confirm email, resulting in the error mentioned above.

How can I successfully add a confirm email field to the register form?

import {MustMatchEmail} from '../helpers/EmailValidator';
import {MustMatch} from '../helpers/must-match.validator';
constructor() {}
UserMail = new FormControl('', [Validators.required, Validators.email, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'), Validators.maxLength(100)]);

ConfirmedEmail = new FormControl('', [Validators.required, Validators.email, Validators.maxLength(100)])

ngOnInit() {
  this.createFormValidations();
}
createFormValidations() {
  this.registerForm = this.formBuilder.group({
      UserMail: this.UserMail,
      ConfirmedEmail: this.ConfirmedEmail,
      UserPass: this.UserPass,
      ConfirmedPassword: this.ConfirmedPassword,

    }, {
      validator: MustMatch('UserPass', 'ConfirmedPassword')
    },
    //The issue arises here, as the function does not accept the confirmation email
    {
      validator: MustMatchEmail('UserMail', 'ConfirmedEmail')
    }
  );
}

https://i.sstatic.net/OVobI.png

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

Why does TypeScript require a generic type parameter when arguments have already been provided?

When I attempted to use the argument p to infer type P, TypeScript still prompted me to provide type P. Why is that? const numberStringConverter = <T extends string | number,P extends {x: any}>(p: P): T => { if(typeof p.x === 'string') ...

Switch the icon in Angular 2 while using ngFor loop

One issue I am facing with my angular2 project is that the icon does not appear when the page loads, but only after clicking. The array being used is called "keys". <ion-grid class="dueD-line" *ngFor="let line of keys; let i=index"> <div style= ...

Browse through websites without refreshing a shared component specific to those pages in Angular 2

Check out this example app: This is the main component of my Angular application: import { Component } from '@angular/core'; @Component({ selector: 'root', template: ` <h1>My Dummy Angular App</h1> <router-out ...

Firestore rule rejecting a request that was meant to be approved

Recently, I came across some TypeScript React code that fetches a firestore collection using react-firebase-hooks. Here's the snippet: const [membersSnapshot, loading, error] = useCollectionData( query( collection(db, USERS_COLLECTION).withConve ...

Troubleshooting issue: aria-expanded not functioning properly in a Next.js application

Summary: In a standard index file using Tailwind CSS, a button functions properly. However, when attempting to implement it in a Next.js project with TypeScript files, issues arise with the @click and aria-expanded attributes. Challenge: The specific prob ...

Issues with the messaging functionality of socket.io

Utilizing socket.io and socket.io-client, I have set up a chat system for users and operators. The connections are established successfully, but I am encountering strange behavior when it comes to sending messages. For instance, when I send a message from ...

What steps should I take to resolve the eslint issue indicating that a TypeScript props interface is not being utilized, even though it is being used?

One of my components utilizes AvatarProps for its props: https://i.sstatic.net/cZBl1.png Below is the interface declaration for AvatarProps: export interface AvatarProps { userName: string; userLastName: string; userImg?: string; onPress?: Functi ...

Stopping the infinite refresh issue in your React webpack application

Every time I modify the TS file, Webpack keeps refreshing the page without stopping. The console message reads: "@ebpack 5.66.0 compiled successfully" I've searched online and experimented with various plugins, but none of them seem to solve the issu ...

Tips for enabling custom object properties in Chrome DevTools

In my typescript class, I am utilizing a Proxy to intercept and dispatch on get and set operations. The functionality is working smoothly and I have successfully enabled auto-completion in vscode for these properties. However, when I switch to the chrome d ...

Angular Persistent States in Angular version 2 and beyond

Currently, I am in the process of transitioning an Angular 1.5.X application to Angular 4. Within my app, I incorporate Angular Ui-Router Sticky State from https://github.com/ui-router/sticky-states to prevent loss of content within my view when navigating ...

Encountered a React select error following an upgrade: specifically, a TypeError stating that dispatcher.useInsertionEffect is not

Recently, I updated the react-select library and to my surprise, it stopped working altogether. Despite consulting the official site and the provided Upgrade guide, I couldn't find any helpful information. I also explored the samples on their website ...

How to reference an array from one component to another in Angular 2

Within my AddUserComponent, I have a public array declared like this: public arr: Array<any> = [] This array stores the names of users. Now, I need to access these values in another component called AddTopicComponent in order to display the user&a ...

The angular.json file contains a script and a styles property

After encountering issues with adding styles and scripts to my angular.json file, I discovered that neither Bootstrap nor other scripts were taking effect. It turns out there are two places where you can define scripts and styles in the angular.json file a ...

What steps can be taken to choose an Angular npm package for datetimepicker in a TypeScript file?

I am facing an issue where document.getElementById and document.querySelector are not returning any results ... I need to access this specific HTML element in order to set a new attribute at a certain event. <datetime id="datePicker" [datepicker]="da ...

You must include the formControlName within a parent formGroup directive

Upon creating a model-driven form, an error is encountered: Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class). ...

Warnings during npm installation such as incorrect version numbers and missing descriptions

There are some warnings appearing in the command line that I need help with: $ npm install npm WARN Invalid version: "x.0.0" npm WARN myFirstAngular2Project No description npm WARN myFirstAngular2Project No repository field. npm WARN myFirstAngular2Projec ...

When initialized within an object, Angular may identify a field as undefined

Whenever I attempt to access a property of the object named "User," it shows up as undefined. However, upon logging the complete object to the console, the field appears with the necessary data. Here is the console log output: perfil.component.ts:42 unde ...

What is the best way to utilize *ngSwitchWhen in a TypeScript environment?

I am currently working with Ionic2 and Angular2 and encountering an issue while trying to implement a segment using ngSwitchWhen. Unfortunately, the functionality is not working as expected and I am receiving an error message. How can I resolve this issue ...

Is it recommended to keep Angular properties private and only access them through methods?

I'm starting to get a bit confused with Angular/Typescripting. I originally believed that properties should be kept private to prevent external alteration of their values. Take this example: export class Foo{ private _bar: string; constructor(pr ...

Steps to fix the postinstall error in Angular CLI

Can anyone lend a hand in resolving the following error? npm ERR! errno -4058 npm ERR! @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c4f40456c14021c021a">[email protected]</a> postinstall: `node ./bin/p ...