title: Custom Validator on reactive form for password and confirm password matching getting undefined parameters into Angular 4
body: <p>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?</p>
  
  <p><strong>signup.component.html</strong></p>
  
  <pre><code>&lt;div class="col-md-7 col-md-offset-1 col-sm-7"&gt;
    &lt;div class="block"&gt;
      &lt;div class="well"&gt;
          &lt;form (onSubmit)="onSubmit()" [formGroup]="signUpForm"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="username" class="control-label"&gt;Nombre de usuario:&lt;/label&gt;
              &lt;input type="text" class="form-control" formControlName="username"  title="Please enter your username" placeholder="username"&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('username').hasError('required') &amp;&amp; signUpForm.get('username').touched"&gt;El nombre de usuario es obligatorio&lt;/p&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('username').hasError('minlength') &amp;&amp; signUpForm.get('username').touched"&gt;El nombre de usuario debe tener al menos 6 caracteres&lt;/p&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('username').hasError('maxlength') &amp;&amp; signUpForm.get('username').touched"&gt;El nombre de usuario debe tener menos de 15 caracteres&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="email" class="control-label"&gt;E-mail:&lt;/label&gt;
              &lt;input class="form-control" formControlName="email" title="Please enter your email" placeholder="example@gmail.com"&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('email').hasError('required') &amp;&amp; signUpForm.get('email').touched"&gt;La dirección de email es obligatoria&lt;/p&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('email').hasError('email') &amp;&amp; signUpForm.get('email').touched"&gt;Debe ingresar una dirección de correo válida&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="password" class="control-label"&gt;Contraseña:&lt;/label&gt;
              &lt;input type="password" class="form-control" formControlName="password" title="Please enter your password" [(ngModel)]="password"&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('password').hasError('required') &amp;&amp; signUpForm.get('password').touched"&gt;Debe ingresar una contraseña&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="confirmedPassword" class="control-label"&gt;Confirmar Contraseña:&lt;/label&gt;
              &lt;input type="password" class="form-control" formControlName="confirmedPassword"  title="Please re-enter your password" [(ngModel)]="confirmedPassword"&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('required') &amp;&amp; signUpForm.get('confirmedPassword').touched"&gt;La confirmación de contraseña no puede estar vacía&lt;/p&gt;
              &lt;p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('passwordMismatch') &amp;&amp; signUpForm.get('confirmedPassword').touched"&gt;Las contraseñas no coinciden&lt;/p&gt;
            &lt;/div&gt;
            &lt;button type="submit" class="btn btn-success" [disabled]="!signUpForm.valid"&gt;Registrarse&lt;/button&gt;
            &lt;a routerLink="/signin" class="btn btn-default" style=""&gt;Ya tenes usuario? Logueate&lt;/a&gt; {{ creationMessage }}
          &lt;/form&gt;
  
        &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>signup.component.ts</strong></p>
  
  <pre><code>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);
      }
    }
  
  }
  </code></pre>
  
  <p><strong>custom-validators.ts</strong></p>
  
  <pre><code>    import { FormControl } from '@angular/forms';
  
      export class CustomValidators{
  
      public static passwordsMatch(password: string, confirmedPassword: string) {
  
       return (control: FormControl) : { [s: string]: boolean } =&gt;{
         //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;
          }
      }
        }
  
  
      }
  </code></pre>