title: Angular 2 Match password in a form
body: <p>I know this question has been asked other times, in similar forms, but I have a little different situation; let me explain:</p>
  
  <p>I have a reset password form, with 3 fields (old password, new password, confirm password). Of course I need to check if the submitted passowrd is equal the submittedw confirmpassword and I want to do it before clicking submit. I defined the form as follows (in the component.ts)
  </p>
  
  <pre class="lang-js prettyprint-override"><code>this.form = fb.group({
    // define your control in you form
    oldpassword: ['', Validators.required],
    password: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]],
    confirmPassword: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(10)]]
  }, {
    validator: PasswordValidation.MatchPassword // your validation method
  });
  
  export class PasswordValidation {
  
  static MatchPassword(AC: AbstractControl) {
      const password = AC.get('password').value; // to get value in input tag
      const confirmPassword = AC.get('confirmPassword').value; // to get value in input tag
      if (password !== confirmPassword) {
        AC.get('confirmPassword').setErrors({MatchPassword: true})
      } else {
          return null
      }
  }
  }  
  </code></pre>
  
  <p>Here is the problem, the form is not valid if I change the "confirm password field" before compiling the "new password" one. In other words, if I respect vertical o9rder of the fields, all is OK, but if I compile the fields in different order, then the form is still invalid.</p>
  
  <p>here is the html code : (as you can see, it is a bit confusing because I have other UX constraint ehich corresponds to user possible interactions)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;form [formGroup]="form" novalidate (ngSubmit)="modal.open()"&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="oldpassword"&gt;Inserisci vecchia password&lt;/label&gt;
            &lt;input type="password" id="oldpassword" class="form-control" formControlName="oldpassword"&gt;
            &lt;div
              *ngIf="form.controls['oldpassword'].hasError('required') &amp;&amp; form.controls['oldpassword'].touched"
              class="alert alert-danger"&gt;
              Campo obbligatorio
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="password"&gt;Inserisci nuova password&lt;/label&gt;
            &lt;input type="password" id="password" class="form-control" formControlName="password"&gt;
            &lt;div *ngIf="form.controls['password'].hasError('required') &amp;&amp; form.controls['password'].touched"
                 class="alert alert-danger"&gt;
              Campo obbligatorio
            &lt;/div&gt;
            &lt;div *ngIf="form.controls['password'].hasError('minlength') &amp;&amp; form.controls['password'].touched"
                 class="alert alert-danger"&gt;
              Lunghezza minima: 4 caratteri.
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label for="confirmPassword"&gt;Ripeti nuova password&lt;/label&gt;
            &lt;input type="password" class="form-control" id="confirmPassword" formControlName="confirmPassword"&gt;
            &lt;div class="alert alert-danger"
                 *ngIf="form.errors?.MatchPassword || (form.controls['confirmPassword'].hasError('required') &amp;&amp; form.controls['confirmPassword'].touched)"&gt;
              Le password non corrispondono
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf="!this.state.controlloIn; else elseBlock"&gt;
            &lt;button type="submit" class="btn btn-primary btn-update" [disabled]="!form.valid || this.controlloInvia"&gt;
              Invia Richiesta
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;ng-template #elseBlock&gt;
            &lt;button type="submit" class="btn btn-primary btn-update" [disabled]="true"&gt;
              Invia Richiesta
            &lt;/button&gt;
          &lt;/ng-template&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>I'm not an angular expert, so if you please could suggest me other best practice I'll be really happy. thanks to all</p>