Angular password and confirm password validation

In this video we will discuss how to compare password and confirm password fields and validate if they are equal. If they are not equal we want to display "Password and Confirm Password does not match" validation error.

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.

This is also commonly called as cross field validation in angular. We cannot use any of the buil-in angular validators to perform cross-field validation. So let's create a custom validator. To use a custom validator in template driven forms, we create the validator as a directive.

We discussed creating custom validators and directives in Parts 25 and 26 of Angular CRUD tutorial. If you are new to these concepts, please check out Parts 25 and 26. The following link is the link to the full Angular CRUD course

We will make this custom validator a reusable validator, so we could use it to compare any 2 input fields for equality. For example, we can use this same custom validator to compare if EMAIL and CONFIRM EMAIL fields are equal.

Text version of the video

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[sourishdutta]

You are a genius. God bless you and Thank you so much for what you are doing. One request sir please make a tutorial series on mongodb and nodejs .Thanks a lot.

[nitishmaanu]

Thank you so much, sir. Saved my time

[varunanaik]

Can you do it in a new component, not in the AppComponent. I am trying this in another component called RegisterComponent

[darshanawanigasekara]

Great stuff... very clear and Thanks....!!!

[varshanimbane]

hi sir, can i do the same things reactive form validation ?

[kavitakohad]

Hi Kudvenkat, I always watch all videos and implemented also. This tutorial I also work but 2nd message not display "Password and Confirm Password does not match" validation error.
My Angular version : 12. can you give the suggestion please?

[enricastanco]

really nice video! So i have an error message on "control.parent"; it's "control.parent it's possibly null". how can I resolve it? thanks for suggestions!

[umeshshelke]

Can you please give me link for How to reset password base on old password of users in Angular 6 . am not able to find anywhere tutorial about the same.

[ILuvBilli]

For a simple functionality, I think it is too much of code. Google should think over it

[johnny_rain]

Hi Kudvenkat, i am a big fan of your videos and i have learned from you more than all of my high school teachers together.
also i like angular very much, but i must ask you a question regarding this video, is there any advantage using a directive vs validating the 2 text boxes using a simple typescript/javascript events?
(i can "compare" the 2 inputs using the 'keyup' event for example and as long as they do not match i can set a boolean field that is binded to a span message element to false).
is there any security issue here or it is just another way to achieve this functionality?

[BEINGLEO]

I've tried implementing these codes multiple times and checked for if I'm deviating from any of your approaches, but I'm pretty this is not working! I'm using angular 6.0.3 as of now. Can you please throw some light on this. I know angular is backward compatible but still. I'm not even getting any errors. Extremely confused.

That's my directive within shared folder:


@Directive({
selector: '[appConfirmEqualValidator]',
providers: [{
provide: NG_VALIDATORS,
useExisting: ConfirmEqualValidatorDirective,
multi: true
}]
})
export class implements Validator {
@Input() appConfirmEqualValidator: string;
validate(control: AbstractControl): {[key: string]: any} | null{
const controlToCompare =
if(controlToCompare && controlToCompare.value !== control.value){
return {'notEqual': true};
}
return null;
}
}

That's the template part [create-employee.component] within employees folder:

<div class="form-group"
&& password.invalid"
&& password.valid">
<label for="password"
<input id="password"
name="password"

#password="ngModel"
type="text"
class="form-control"
required>
<span class="help-block" *ngIf="password.touched && password.invalid">
Password is required.
</span>
</div>

<div class="form-group"
&& confirmPassword.invalid"
&& confirmPassword.valid">
<label for="password" class="control-label">Confirm Password</label>
<input id="confirmPassword"
name="confirmPassword"

#confirmPassword="ngModel"
type="text"
class="form-control"

required>
<span class="help-block" && confirmPassword.invalid">
Confirm Password is required.
</span>
<span class="help-block" && confirmPassword?.notEqual">
Password and Confirm Password does not match!
</span>
</div>

And finally, this is the app module:

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

import { AppComponent } from './app.component';
import { ListEmployeesComponent } from
import { CreateEmployeeComponent } from
import { } from
import { } from

const AppRoutes: Routes = [
{ path: 'list', component: ListEmployeesComponent },
{ path: 'create', component: CreateEmployeeComponent },
{ path: '', redirectTo: '/list', pathMatch: 'full' }
];

@NgModule({
declarations: [
AppComponent,
ListEmployeesComponent,
CreateEmployeeComponent,
SelectRequiredValidatorDirective,

],
imports: [
BrowserModule,
RouterModule.forRoot(AppRoutes),
FormsModule,
BsDatepickerModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

[mylittleworld]

Create a call by reference function program that takes user ID (in integer) and password (in integer) as inputs. If default ID and password is wrong, then show a message that incorrect user ID and password otherwise show you are successfully login and change the password. Once the password has been changed, login again with the same ID and new password. It must be login successfully and ask again to change the password. In case of incorrect password, program stop.

Please give me the answer of this code

[BlueNSour]

hmm I'm getting an error when I try to include it into apps.module.ts


I realize I spelt confirm with a lower case C and I've checked the spelling. I am working with angular 5 though is this compatible?
thank you

[RajeevKumar-jtvl]

sir your video material is very massive pls make sure your study material are not a massive....

[veereshsirsi]

it is easy doing it by ng-pattern i guess..

[ergyan]

how would you implement this in reactive forms

[varunanaik]

I am getting error as below while i load my page


ERROR TypeError: Cannot read property 'get' of undefined
at
at forms.js:1583
at forms.js:1528
at Array.map (<anonymous>)
at _executeValidators (forms.js:1524)
at forms.js:1466
at forms.js:1528
at Array.map (<anonymous>)
at _executeValidators (forms.js:1524)
at FormGroup.validator (forms.js:1466)