I'm trying to implement a custom validator to check if the password and password confirm are equal. The problem is that the validator is getting undefined password and confirmedPassword parameters. How do I make this work. The function works cause if I change the condition to === instead of !== it throws the error correctly when the fields are the same. Does anyone know which is the error here?

signup.component.html

<div class=col-md-7 col-md-offset-1 col-sm-7>

  <div class=block>

    <div class=well>

        <form (onSubmit)=onSubmit() [formGroup]=signUpForm>

          <div class=form-group>

            <label for=username class=control-label>Nombre de usuario:</label>

            <input type=text class=form-control formControlName=username  title=Please enter your username placeholder=username>

            <p class=help-block *ngIf=signUpForm.get('username').hasError('required') && signUpForm.get('username').touched>El nombre de usuario es obligatorio</p>

            <p class=help-block *ngIf=signUpForm.get('username').hasError('minlength') && signUpForm.get('username').touched>El nombre de usuario debe tener al menos 6 caracteres</p>

            <p class=help-block *ngIf=signUpForm.get('username').hasError('maxlength') && signUpForm.get('username').touched>El nombre de usuario debe tener menos de 15 caracteres</p>

          </div>

          <div class=form-group>

            <label for=email class=control-label>E-mail:</label>

            <input class=form-control formControlName=email title=Please enter your email [email protected]>

            <p class=help-block *ngIf=signUpForm.get('email').hasError('required') && signUpForm.get('email').touched>La dirección de email es obligatoria</p>

            <p class=help-block *ngIf=signUpForm.get('email').hasError('email') && signUpForm.get('email').touched>Debe ingresar una dirección de correo válida</p>

          </div>

          <div class=form-group>

            <label for=password class=control-label>Contraseña:</label>

            <input type=password class=form-control formControlName=password title=Please enter your password [(ngModel)]=password>

            <p class=help-block *ngIf=signUpForm.get('password').hasError('required') && signUpForm.get('password').touched>Debe ingresar una contraseña</p>

          </div>

          <div class=form-group>

            <label for=confirmedPassword class=control-label>Confirmar Contraseña:</label>

            <input type=password class=form-control formControlName=confirmedPassword  title=Please re-enter your password [(ngModel)]=confirmedPassword>

            <p class=help-block *ngIf=signUpForm.get('confirmedPassword').hasError('required') && signUpForm.get('confirmedPassword').touched>La confirmación de contraseña no puede estar vacía</p>

            <p class=help-block *ngIf=signUpForm.get('confirmedPassword').hasError('passwordMismatch') && signUpForm.get('confirmedPassword').touched>Las contraseñas no coinciden</p>

          </div>

          <button type=submit class=btn btn-success [disabled]=!signUpForm.valid>Registrarse</button>

          <a routerLink=/signin class=btn btn-default style=>Ya tenes usuario? Logueate</a> {{ creationMessage }}

        </form>



      </div>



  </div>

</div>

signup.component.ts

import { Component, OnInit, ViewChild, Input } from '@angular/core';

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

import { CustomValidators } from '../../shared/custom-validators';

import { Observable } from 'rxjs/Observable';



@Component({

  selector: 'app-signup',

  templateUrl: './signup.component.html',

  styleUrls: ['./signup.component.sass']

})

export class SignupComponent implements OnInit {



  signUpForm: FormGroup;

  user = {

    username: '',

    email: '',

    password: ''

  };

  submitted = false;

  @Input() password='';

  @Input() confirmedPassword='';



  constructor() { }



  ngOnInit() {



    this.signUpForm = new FormGroup({

      'username': new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15)]),

      'email': new FormControl(null, [Validators.required, Validators.email, Validators.minLength(5)]),

      'password': new FormControl(null, [Validators.required]),

      'confirmedPassword': new FormControl(null, [Validators.required, CustomValidators.passwordsMatch(this.password,this.confirmedPassword).bind(this)])

    });

  }



  onSubmit() {

    if (this.signUpForm.valid) {

      console.log(this.signUpForm.value);

    }

  }



}

custom-validators.ts

    import { FormControl } from '@angular/forms';



    export class CustomValidators{



    public static passwordsMatch(password: string, confirmedPassword: string) {



     return (control: FormControl) : { [s: string]: boolean } =>{

       //getting undefined values for both variables

       console.log(password,confirmedPassword);

        //if I change this condition to === it throws the error if the 

//  two fields are the same, so this part works

        if (password !== confirmedPassword) {

          return { 'passwordMismatch': true }

        } else {

          //it always gets here no matter what

          return null;

        }

    }

      }





    }