title: Is there any way to validate Current Password in angular with reactive form using custom validator
body: <p>I created a change password form having four fields including 'current password', 'new password' , 'confirm password' and a hidden field 'password flag'. Validating new password and confirm password is working fine(no issues with that). Current password is stored in DB as encrypted.So what I do here, on each keystroke, I'll send it to Spring boot application and check for matching .If both current password and typed password are same, it will return true otherwise false.That bool value is stored in the hidden input field. Then I'm checking until the condition falls true in custom validator. But the result is not proper as desired.  </p>
  
  <p>This is working on Windows 10, running Angular 6,Spring boot and Mysql.</p>
  
  <p>Validator.ts</p>
  
  <pre><code>export function CheckPswd(control: AbstractControl) {
      if (control &amp;&amp; (control.value !== null || control.value !== undefined)) {
  
          const passControl = control.root.get('passflag');
          if (passControl) {
              if(passControl.value)
                  return null;
              else
                  return {
                      cfpswdmismatch: true
                  };
          }
      }
      return null;
  }
  </code></pre>
  
  <p>TS file-</p>
  
  <pre><code> pswdForm: FormGroup = this.fb.group({
      curpass: ['', [Validators.required,CheckPswd]],
      passflag:[this.flag],
      newpass: ['', [Validators.required]],
      confpass: ['', [Validators.required, MatchPswd]],
    });
    getCurrPswd() {
      let pswd = this.pswdForm.get('curpass').value;
      this.service.checkPswd(this.userID, pswd).subscribe(data =&gt; {
        if (data == false)
          this.flag = false;
        else
          this.flag = true;
        //console.log(this.flag)
        this.pswdForm.get('passflag').setValue(this.flag);
      })
  
    }
  </code></pre>
  
  <p>HTML File-</p>
  
  <pre><code>    &lt;form [formGroup]="pswdForm" (ngSubmit)="submitPswd()"&gt;
      &lt;div class="modal-body"&gt;
          &lt;mat-form-field style="display: block;width: 220px;"&gt;
            &lt;input matInput type="password" name="cpswd" placeholder="Current Password" formControlName="curpass" (blur)="getCurrPswd()" required&gt;
            &lt;mat-error *ngIf="pswdForm.controls.curpass.errors?.cfpswdmismatch &amp;&amp; !pswdForm.controls.curpass.errors?.required"&gt;
              Current Password not matching
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
          &lt;input type="hidden" name="boolflag" formControlName="passflag"&gt;
          &lt;mat-form-field style="display: block;width: 220px;"&gt;
            &lt;input matInput type="password"  name="npswd" placeholder="New Password" formControlName="newpass"&gt;
            &lt;mat-error *ngIf="pswdForm.controls.newpass.errors?.required"&gt;
              Field is required
            &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field style="display: block;width: 220px;"&gt;
            &lt;input matInput type="password" name="cfpswd" placeholder="Confirm Password" formControlName="confpass"&gt;
            &lt;mat-error *ngIf="pswdForm.controls.confpass.errors?.pswdmismatch &amp;&amp; !pswdForm.controls.confpass.errors?.required &amp;&amp; pswdForm.controls.newpass.touched"&gt;
                Password is not matching
              &lt;/mat-error&gt;
              &lt;mat-error *ngIf="pswdForm.controls.confpass.errors?.required"&gt;
                Field is required
              &lt;/mat-error&gt;
          &lt;/mat-form-field&gt;
  
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;div&gt;{{msg}}&lt;/div&gt;
        &lt;button mat-raised-button type="submit" [disabled]="pswdForm.invalid" btn-outline-secondary&gt;
          Submit
        &lt;/button&gt;
  
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>I expect the current password field should show error when entered password is wrong.</p>