I have been working on implementing password and confirm password validation within an angular project. I recently came across a helpful answer on this thread Confirm password validation in Angular 6 that I tried to follow. Unfortunately, I am encountering issues with not receiving any error messages, and I am unsure of what mistake I might be making. Below is the TypeScript code I am using:
constructor(private formBuilder:FormBuilder,private userService:UsersService,private router:Router) { }
addForm: FormGroup;
selected = 'option2';
passwordsMatcher = new RepeatPasswordEStateMatcher;
ngOnInit() {
this.addForm = this.formBuilder.group({
id: [],
userName: ['', Validators.required],
password:new FormControl( '',[ Validators.required]),
passwordAgain: new FormControl('',[ Validators.required]),
userRole:['',Validators.required],
},{ validator: RepeatPasswordValidator });
}
onSubmit() {
if (this.addForm.valid)
{
this.userService.createUser(this.addForm.value)
.subscribe( data => {
this.router.navigate(['newuser']);
});
console.log(this.addForm.controls.password.value);
}
}
changeClient(value) {
console.log(value);
console.log(this.addForm.controls.value);
}
My current validator implementation looks like this:
export class RepeatPasswordEStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
return (control && control.parent.get('password').value !== control.parent.get('passwordAgain').value)
}
}
export function RepeatPasswordValidator(group: FormGroup) {
let password = group.controls.password.value;
let passwordConfirmation = group.controls.passwordAgain.value;
return password === passwordConfirmation ? null: { passwordsNotEqual: true }
}
Furthermore, here is the template structure I've set up:
<div style="height: 100vh" fxLayout="column" fxLayoutAlign="center center" >
<h2 class="text-center">Add User</h2>
<mat-card>
<mat-card-content>
<form [formGroup]="addForm" class="login-form" (ngSubmit)="onSubmit()">
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput type="text" formControlName="userName" placeholder="userName" name="userName" class="form-control" id="userName">
</mat-form-field>
</div>
<div class="form-group">
<mat-form-field class="example-full-width">
<input matInput type="password" formControlName="password" placeholder="Password" name="password" class="form-control" id="password">
<mat-error *ngIf="addForm.controls.password.hasError('required')" >Passwords can't be empty</mat-error>
</mat-form-field>
<div class="form-field">
<mat-form-field>
<input matInput formControlName="passwordAgain" placeholder="Confirm the password" type="password" [errorStateMatcher]="passwordsMatcher">
<mat-error *ngIf="addForm.controls.passwordAgain.hasError('passwordsNotEqual')" >Passwords are different. They should be equal!</mat-error>
</mat-form-field>
</div>
<mat-form-field>
<mat-select placeholder="Roles" formControlName="userRole" id="userRole" (selectionChange)="changeClient($event.value)" [(value)]="selected">
<mat-option value="Admin">Admin</mat-option>
</mat-select>
</mat-form-field>
<div class="container" style="margin: 12px" fxLayout="row" fxLayoutAlign="center center">
<button mat-raised-button color="primary">Create</button>
</div>
</form>
</mat-card-content>
</mat-card>
</div>
If anyone could provide some assistance or guidance on my current setup, I would greatly appreciate it. Thank you.