Angular 2 form validating for repeat password
<p>Please refer to this <a href="https://stackoverflow.com/questions/33768655/comparing-fields-in-validator-with-angular2">question</a> regarding the <strong>Comparing fields in validator with Angular 2</strong>. Unfortunately Angular 2 changed a bit so that solution seems not working anymore. Here is my code:</p>
<pre class="lang-js prettyprint-override"><code>import {IonicApp, Page, NavController, NavParams} from 'ionic/ionic'
import {Component} from 'angular2/core'
import {FORM_PROVIDERS, FormBuilder, Validators} from 'angular2/common'
import {ControlMessages} from '../../components/control-messages'
import {ValidationService} from '../../services/validation-service'

@Page({
  templateUrl: 'build/pages/account/register.html',
  directives: [ControlMessages]
})
export class RegisterPage {
  constructor(nav: NavController, private builder: FormBuilder) {
    this.nav = nav
    this.registerForm = this.builder.group({
      'name':     ['', Validators.required],
      'email':    ['', Validators.compose([Validators.required, ValidationService.emailValidator])],
      'password': ['', Validators.required],
      'repeat':   ['', this.customValidator]
      }
    )        
  }

  register() {    
    alert(this.registerForm.value.password)
  }

  private customValidator(control) {         
    //console.log(this.registerForm.value.password)
    //return {isEqual: control.value === this.registerForm.value.password}
    return true  
  }
}
</code></pre>
<p>My html:</p>
<pre class="lang-html prettyprint-override"><code>&lt;ion-content class=&quot;account&quot;&gt;
  &lt;ion-list padding&gt;
    &lt;form [ngFormModel]='registerForm' (submit)='register()'&gt;
      &lt;div class=&quot;centered&quot;&gt;
        &lt;img class=&quot;logo&quot; src=&quot;img/logo.png&quot; alt=&quot;&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;spacer&quot; style=&quot;height: 20px;&quot;&gt;&lt;/div&gt;
    
      &lt;ion-input&gt;
        &lt;ion-label floating&gt;Name&lt;/ion-label&gt;
        &lt;input type=&quot;text&quot; ngControl='name' id='name'&gt;
        &lt;control-messages control=&quot;name&quot;&gt;&lt;/control-messages&gt;            
      &lt;/ion-input&gt;
    
      &lt;ion-input&gt;
        &lt;ion-label floating&gt;Email&lt;/ion-label&gt;
        &lt;input type=&quot;email&quot; ngControl='email' id='email'&gt;
        &lt;control-messages control=&quot;email&quot;&gt;&lt;/control-messages&gt;               
      &lt;/ion-input&gt;

      &lt;ion-input&gt;
        &lt;ion-label floating&gt;Password&lt;/ion-label&gt;
        &lt;input type=&quot;password&quot; ngControl='password' id='password' value=&quot;&quot;&gt;
        &lt;control-messages control=&quot;password&quot;&gt;&lt;/control-messages&gt;        
      &lt;/ion-input&gt;

      &lt;ion-input&gt;
        &lt;ion-label floating&gt;Confirm Password&lt;/ion-label&gt;
        &lt;input type=&quot;password&quot; ngControl='repeat' id='repeat'&gt;
        &lt;control-messages control=&quot;repeat&quot;&gt;&lt;/control-messages&gt;                
      &lt;/ion-input&gt;

      &lt;button class=&quot;calm&quot; full type='submit' [disabled]='!registerForm.valid'&gt;Register&lt;/button&gt;
    
      &lt;ion-item style=&quot;background-color:transparent;border:none;&quot;&gt;
        &lt;button class=&quot;text-button&quot; clear item-right (click)=&quot;gotoLogin()&quot;&gt;Have an account already, Login&lt;/button&gt;
      &lt;/ion-item&gt;
    &lt;/form&gt;
  &lt;/ion-list&gt;

&lt;/ion-content&gt;
</code></pre>
<p>But unfortunately, I can't access the <code>password</code> value in my validating function. If I uncomment <code>console.log(this.registerForm.value.password)</code>, then I get the following error message:</p>
<blockquote>
<p>EXCEPTION: TypeError: Cannot read property 'value' of undefined</p>
</blockquote>
<p>Any idea? Thanks.</p>