Verify that the password is entered correctly in Angular2

My Angular2 form looks like this:

this.registerForm = formBuilder.group({
        'name': ['', Validators.required],
        'email': ['', Validators.compose([Validators.pattern("[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"), Validators.required])],
        'password': ['', Validators.compose([Validators.minLength(6), Validators.required])],
        'repassword': ['', Validators.compose([Validators.minLength(6), Validators.required])]
    });

Despite following the advice in this Stack Overflow answer, I am struggling to include ControlGroup to check repassword against password and display an error message.

Your help is greatly appreciated.

javascripttypescriptangular2-routingangular2-forms

Answer №1

To ensure that the passwords match, you must create a custom validator in your Angular form. The validator will compare the values of the password and repassword fields.

import { AbstractControl } from '@angular/forms';

function comparePassword(c: AbstractControl) {
    return c.get('password').value === c.get('repassword').value;
}

this.myForm = this.fb.group({
    name: ['', Validators.compose([Validators.required])],
    email: [''],
    passwordgroup: this.fb.group({
        password: ['', Validators.compose([Validators.required])],
        repassword: ['', Validators.compose([Validators.required])]
    }, comparePassword)
});

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

Leveraging the source of an image from asset variables

Lately, I've been experiencing issues with displaying images on my page, specifically when trying to show a list of images. The problem arises when attempting to store the image URL in a variable or object instead of hardcoding it directly into the s ...

javascriptvue.jswebpackvue-componentvue-cli

Object Literal vs Object-Oriented Javascript: Comparing the Two

When it comes to using Object-Oriented Programming (OOP) in JavaScript, I often find myself not utilizing it much. For instance, instead of defining a constructor function and setting up prototypes like this: function Person(name){ return this.name = name ...

javascriptoop

ES6 module import import does not work with Connect-flash

Seeking assistance with setting up connect-flash for my nodejs express app. My goal is to display a flashed message when users visit specific pages. Utilizing ES6 package module type in this project, my code snippet is as follows. No errors are logged in t ...

javascriptnode.jsexpresses6-modulesconnect-flash

JavaScript tip: Finding the total sum of strings with time format (e.g. 00:00:00)

I have an array that contains time values: // hours, minutes, seconds let arr = ["00:00:30", "00:20:00", "01:00:10", "05:10:15"] Is there a way to calculate the total sum of these elements? output: "06:30:55" ...

javascripttime

What is the method for organizing object bodies (parent/child) in Cannon.js?

After extensively searching and reviewing issues and documentation, it seems that apart from establishing a constraint between two Cannon bodies, there is no direct method to unite shapes of varying masses. Currently, I am using the lockConstraint approac ...

javascriptthree.jscannon.js

React - modifying parent's Redux property

After connecting my Container to redux using the following: const mapStateToProps = ({ MyReducer }) => ({ myProp: MyReducer.myProp }); I am wondering if it is possible to manually set the value of myProp from the parent component (bypassing redux) ...

javascriptreactjsredux

Choose the minimum price from the JSON response of the API

I have made an AJAX request to an API and received the following JSON response below. I am trying to extract the lowest 'MinPrice' from the 'Quotes' data but finding it challenging to determine the best approach. One method I am consid ...

javascriptjqueryarraysjson

JavaScript Polling Based on Time

I am currently working on developing an alarm clock feature using the Date() object. My aim is to have a function trigger when the time from the date object matches the time set by the user. Users set their alarms by selecting a specific time, but I' ...

javascripthtmltimer

What causes the consistent filling of responses in jQuery ajax?

After observing that the response of an ajax call using jQuery is never empty, I have come across the following code snippet: $.ajax({ type: "get", data: { data }, url: "phpFile", datatype: 'text' }).done(functio ...

javascriptphpjquerymysqlajax

Executing program through Socket.io alert

My NodeJS server sends notifications to clients when certain actions are performed, such as deleting a row from a grid. Socket.io broadcasts this information to all connected clients. In the example of deleting a row, one approach could be adding an `acti ...

javascriptnode.jsangularjssocket.ioeval

Utilizing a React hook within an event listener

I have developed a custom hook for playing audio in react, here is the code: "use client"; import { useEffect, useState } from "react"; export const useAudio = (url: string) => { const [audio, setAudio] = useState<HTMLAudioE ...

javascriptreactjsnext.jsreact-hookshtml5-audio

Our system has picked up on the fact that your website is failing to verify reCAPTCHA solutions using Google reCAPTCHA V2

Error Message We have noticed that your website is not validating reCAPTCHA solutions. This validation is necessary for the correct functioning of reCAPTCHA on your site. Please refer to our developer site for further information. I have implemented the re ...

javascriptphpajaxrecaptchainvisible-recaptcha

Is there a way to automatically close all open sub-menus when clicking on a different parent menu item?

Check out this LINK for the code I am using. When I click on the Parent Menu, such as Services, the sub-menu of the Services menu will open. However, when I click on another menu, the sub-menu will also open. I want the previous sub-menu to close when I c ...

javascriptjquerybootstrap-4

Works perfectly in Firefox, experiencing glitches in Chrome

After creating a page that utilizes a simple JSon table and JS/JQ to display data, I noticed a slight bug in Chrome when the files were separated into HTML, CSS, JS, and JSON components. The page works perfectly in both Chrome and FF when hosted together o ...

javascriptjqueryjsongoogle-chrome

Integrating Gesture Handling in Leaflet JS for two-finger scrolling enforcement

Have you ever noticed that when you're using a mobile device and scrolling down a webpage with a Google map, the map goes dark and prompts you to "Use two fingers to move the map"? https://i.stack.imgur.com/4HD1M.jpg I am interested in incorporating ...

javascriptleafletdispatcheventtouchmove

Difficulty replicating 3 input fields using JavaScript

Combining the values of 3 input fields into 1 Displaying 'fname mnane lname' in the fullname input field. Then copying the fullname value into another input field called fullname2. Check out the code below for both HTML and JavaScript implemen ...

javascripthtmlbootstrap-4

Encountered an issue in Typescript with error TS2554: Was expecting 0 arguments but received 1 when implementing useReducer and useContext in React

I've encountered several errors with my useReducers and useContext in my project. One specific error (TS2554) that I keep running into is related to the AuthReducer functionality. I'm facing the same issue with each Action dispatch. I've tri ...

javascriptreactjstypescriptuse-contextuse-reducer

Strategies for limiting a table row in JavaScript or jQuery without utilizing the style tag or class attribute for that specific row

I am looking for a way to limit the display of records in a table. Currently, I can restrict the table rows using the style property, but this causes UI issues such as missing mouse-over effects for the entire row. I need to ensure that mouse-over functi ...

javascriptjqueryhtmlcss

Adding two input values using jQuery

Here is the function compute() that I am working with: function compute() { if ($('input[name=type]:checked').val() != undefined) { var a = $('input[name=service_price]').val(); var b = $('input[name=modem_pric ...

javascriptjqueryinput

What is the best way to add a delay to ajax using setTimeout when working within a switch case

Is there a way to add a delay of 20 seconds to the Ajax function before displaying the next chat line? I'm trying to implement a feature where Ajax waits a few seconds before showing the next chat line that is submitted. For instance, imagine that t ...

javascriptphpjqueryajax