How to set component's invalid from typescript controller in angular

Question

This is my component code.

<div class="form-group col-md-6">
                  <input type="password" class="form-control" [(ngModel)]="model.currentPassword" #currentPassword="ngModel" id="currentPassword"
                         name="currentPassword">
                  <div *ngIf="currentPassword.invalid" class="invalid-feedback">
                    <div> Current Password does not match.</div>
                  </div>
                </div>

when I submit form , I check current password is match with password in database.
If password match , I don't want to show currentPassword.invalid .
If password doesn't match , I want to show

Current Password does not match.

.
How can I do this from typescript controller ?
Condition like ,

if(passwordMatch)
{
currentPassword.invalid = false;
}
else
{
currentPassword.invalid = true;
}

I just don't know well about angular selector .

Possible duplicate of [Confirm password validation in Angular 6](https://stackoverflow.com/questions/51605737/confirm-password-validation-in-angular-6) — Ethan Vu, Jul 22 '19 at 12:12
@EthanVu , It's not duplicate , the question you mentioned is about matching new password and retype password . My question is about matching Old password with password from database . Let say there is three input box , 1. Current Password 2. New Password 3. Retype Password .... The question you mentioned is about to match 2 and 3. My question is to match Current Password with database's password . — Steven Sann, Jul 22 '19 at 12:25
The code you have written seems achieve your desired behavior, and you can use a simple boolean flag instead `currentPassword.invalid`. The `invalid` attribute is useful in case you implement Angular Material form fields, but in that case you must add a form controller to your input and change a little your code to be compliant to Material forms syntax. If you have some extra info about desired behavior i can extend my response ;) — Simo, Jul 22 '19 at 12:54

score 1 · Answer 1 · answered Jul 22 '19 at 14:09

You are currently working with a temple driven form. If you want to add custom validators I would advice to switch to Reactive forms (even if you do not need custom validators I would use the Reactive forms approach and not the template driven one, it gives you more control).

But if you want to stay firm with the template driven forms, you can add custom validators with Angular directives.

First you need to make a validation factory function. This is a function that builds and return the validation function.

import { Directive, forwardRef } from '@angular/core';
import { NG_VALIDATORS, AbstractControl, ValidatorFn, Validator, FormControl } from '@angular/forms';


// validation function
function validatePasswordMatchFactory() : ValidatorFn {
  return (c: AbstractControl) => {

    let inputPassword = c.value;

    //Do a check if password matches

    if(passwordMatches) {
      // No error
      return null;
    } else {
      // Error
      return {
        passwordMatch: {
          valid: false
        }
      };
    }

  }
}


@Directive({
  selector: '[passwordMatch][ngModel]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: passwordMathcValidator , multi: true }
  ]
})
export class passwordMathcValidator implements Validator {
  validator: ValidatorFn;

  constructor() {
    this.validator = validatePasswordMatchFactory();
  }

  validate(c: FormControl) {
    return this.validator(c);
  }

}

Now you can add the directive to your HTML.

<div class="form-group col-md-6">
   <input 
      type="password" 
      class="form-control" 
      [(ngModel)]="model.currentPassword" 
      #currentPassword="ngModel" 
      id="currentPassword"
      name="currentPassword"
   >
   <div *ngIf="currentPassword.errors.passwordMatch" class="invalid-feedback">
   <div> Current Password does not match.</div>
   </div>
</div>

If it does not have to be a form validation, but you just want to show the alert in the html. You can solve it a lot more simple. Just set a boolean in your TS file for example : passwordDoesNotMatch = false;

Then you change it if it matches and back to false after you submit.

The HTML would then look like this:

          <div *ngIf="passwordDoesNotMatch " class="invalid-feedback">
            <div> Current Password does not match.</div>
          </div>

Hope this helps!

How to set component's invalid from typescript controller in angular

1 Answers1