CODEWITHSUNDEEP
angularvalidation
pierre
pierre

Reputation: 933

Angular formgroup level validation error path

Can you tell me in the form group level, how can i get the passwordMatchValidator error, please?

HTML:

<input>*****</input>
<mat-error *ngIf="form.errors.mismatch">
mismatch error
</mat-error>

TYPESCRIPT:

const form = new FormGroup({
  password: new FormControl('', Validators.minLength(2)),
  passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);


function passwordMatchValidator(g: FormGroup) {
   return g.get('password').value === g.get('passwordConfirm').value
      ? null : {'mismatch': true};
}

Upvotes: 0

Views: 1356

Answers (2)

Андрей Глебов
Андрей Глебов

Reputation: 1

I believe you forgot to add "this" (It's a part of a Component class isn't it?):

const form = new FormGroup({
  password: new FormControl('', Validators.minLength(2)),
  passwordConfirm: new FormControl('', Validators.minLength(2)),
}, this.passwordMatchValidator);

Upvotes: 0

Sachin Shah
Sachin Shah

Reputation: 4533

I have checked password and confirm password based on while type confirm password...

HTML file ...

<div class="form-group">
  <input type="password" formControlName="password" class="form-control input-underline input-lg" id="password" placeholder="Password">
</div>
<div class="form-group">
  <input type="password" formControlName="confirmPassword" class="form-control input-underline input-lg" id="confirmPassword" (input)="checkPassword()" placeholder="Repeat Password">
</div>                    

<div *ngIf="passwordNotMatched">Password and confirmPassword is not matched</div>

In .ts file... 

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.registerForm = this.formBuilder.group({                        
        name: ['', [Validators.required]],
        email: ['', [Validators.required]],
        password: ['', [Validators.required, Validators.minLength(3)]],
        confirmPassword: ['', [Validators.required, Validators.minLength(3)]]
    });
}

get f() { return this.registerForm.controls; }

checkPassword(){
    console.log("Password : ",this.registerForm.value.password);
    console.log("Conform : " , this.registerForm.value.confirmPassword);
    if(this.registerForm.value.password == this.registerForm.value.confirmPassword){
       this.passwordNotMatched = false; 
    }else{
        this.passwordNotMatched = true;
    }        
}

While password is not matched ...

Password not matched

When password matched ...

enter image description here

To set in <mat-error> : 

<div class="example-container">
   <mat-form-field>
     <input type="password" formControlName="confirmPassword" class="form-control input-underline input-lg" id="confirmPassword" (input)="checkPassword()" placeholder="Repeat Password">
     <mat-error *ngIf="passwordNotMatched">Password and confirmPassword is not matched</mat-error>
   </mat-form-field>
 </div>

Note: The above <mat-error> code is just for your reference , It is untested code due to not install material in my project.

Upvotes: 1

Related Questions