Angular password and confirm password validation

[@nitishmaanu5655]

Thank you so much, sir. Saved my time

[@sourishdutta9600]

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.

[@pavanisree2394]

Your voice is mesmerizing

[@darshanawanigasekara6180]

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

[@anuragpandey2493]

will i have to modify the Employee class model and add password and confirm password properties ???

[@krishnavankadari]

👏🏾👏🏾👏🏾 appreciate the effort

[@varunanaik2832]

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

[@enricastanco4909]

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!

[@jacksm8709]

this is perfect worked like a charm

[@varshanimbane7087]

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

[@johnny_rain3226]

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?

[@Csharp-video-tutorialsBlogspot]

Hi Johnny - You are thinking just like how I was thinking when I started learning Angular. This same thing could be achieved very easily as you said, but the problem is the valid property at form level may not be updated automatically. This means, let's say if you are disabling Submit button based on whether the form is valid or not, it may not work as expected. This is just one example, but there could be several others. Hope this helps and answers your question.

[@johnny_rain3226]

that`s make sense, why not to make a use the 2 way binding of angular feature.. thank you very much for finding time to answer my question.

[@kavitakohad7492]

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?

[@BlueNSour]

hmm I'm getting an error when I try to include it into apps.module.ts "unexpected value 'confirmEqualValidatorDirective' declared by the module 'AppModule'. Please add a @Pipe/@Directive/@Component annotation." 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

[@lazharimen1475]

this method is more easier reister.componenet.html ==> The passwords entered do not match [disabled]="registerForm.invalid || repassword.value != password.value"

[@ergyan300]

how would you implement this in reactive forms

[@mdk124]

@@tomsnively1473 I tried this together with materials, and while it is checking if the passwords are equal, I am not getting my mat error to show.. *ngIf="confirm_password.errors?.notEqual"

[@teamacevedo4162]

excellent, more thanks

[@BEINGLEO1]

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 [confirm-equal-validator.directive.ts] within shared folder: --------------------------------------------------------------------------------------------------------------------------- import { Validator, NG_VALIDATORS, AbstractControl } from '@angular/forms'; import { Directive, Input } from '@angular/core'; @Directive({ selector: '[appConfirmEqualValidator]', providers: [{ provide: NG_VALIDATORS, useExisting: ConfirmEqualValidatorDirective, multi: true }] }) export class ConfirmEqualValidatorDirective implements Validator { @Input() appConfirmEqualValidator: string; validate(control: AbstractControl): {[key: string]: any} | null{ const controlToCompare = control.parent.get(this.appConfirmEqualValidator); if(controlToCompare && controlToCompare.value !== control.value){ return {'notEqual': true}; } return null; } } That's the template part [create-employee.component] within employees folder: -------------------------------------------------------------------------------------------------------------------------------- Password Password is required. Confirm Password Confirm Password is required. Password and Confirm Password does not match! And finally, this is the app module: -------------------------------------------------------- import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'; import { AppComponent } from './app.component'; import { ListEmployeesComponent } from './employees/list-employees.component'; import { CreateEmployeeComponent } from './employees/create-employee.component'; import { SelectRequiredValidatorDirective } from './shared/select-required-validator.directive'; import { ConfirmEqualValidatorDirective } from './shared/confirm-equal-validator.directive'; const AppRoutes: Routes = [ { path: 'list', component: ListEmployeesComponent }, { path: 'create', component: CreateEmployeeComponent }, { path: '', redirectTo: '/list', pathMatch: 'full' } ]; @NgModule({ declarations: [ AppComponent, ListEmployeesComponent, CreateEmployeeComponent, SelectRequiredValidatorDirective, ConfirmEqualValidatorDirective ], imports: [ BrowserModule, RouterModule.forRoot(AppRoutes), FormsModule, BsDatepickerModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

[@ILuvBilli]

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

[@juturisharon3075]

Great video

[@aalokakgecian]

Can you test it with type password ?

[@varunanaik2832]

I am getting error as below while i load my page ERROR TypeError: Cannot read property 'get' of undefined at MatchPasswordDirective.validate (match-password.directive.ts:17) at forms.js:1583 at forms.js:1528 at Array.map () at _executeValidators (forms.js:1524) at forms.js:1466 at forms.js:1528 at Array.map () at _executeValidators (forms.js:1524) at FormGroup.validator (forms.js:1466)

[@MuraliKrishna-qp2ue]

thanks nice vedio...

[@umeshshelke725]

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.

[@RajeevKumar-jt8vl]

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

[@rohinibakare3390]

Easy to understand code

[@mylittleworld1668]

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

[@veereshsirsi7639]

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

[@chakravarthydadhireddy2553]

its not working for me

[@OlgaWitcher]

perfect!