title: Password match validation in reactive form in Angular
body: <p>I have two inputs (<code>newPassword</code> and <code>confirmPassword</code>) which must be validated by matching them.
  I have <code>resetPasswordFormGroup</code> which is defined in <code>reset-password.component</code>.</p>
  <p>When I use <code>MustMatch</code> custom validator in my <code>formgroup</code> I get this error.
  Actually, I'm confused about how to use the custom validator.</p>
  <blockquote>
  <p>Argument of type '{ validator: (formGroup: FormGroup) =&gt; void; }' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.
  Object literal may only specify known properties, and 'validator' does not exist in type 'ValidatorFn | ValidatorFn[] | AbstractControlOptions'.ts(2345)</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>resetPasswordFormGroup = new FormGroup({
          currentPassword: new FormControl(null, Validators.required),
          newPassword: new FormControl(null, Validators.required),
          confirmNewPassword: new FormControl(null, Validators.required),
      });
  
      get currentPasswordFormControl() {
          return this.resetPasswordFormGroup.get('currentPassword');
      }
  
      get newPasswordFormControl() {
          return this.resetPasswordFormGroup.get('newPassword');
      }
  
      get confirmNewPasswordFormControl() {
          return this.resetPasswordFormGroup.get('confirmNewPassword');
      }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>        &lt;form [formGroup]='resetPasswordFormGroup' (ngSubmit)=&quot;onPasswordChange()&quot;&gt;
              &lt;mat-card-content&gt;
                  &lt;mat-form-field class=&quot;center-text&quot;&gt;
                      &lt;input matInput placeholder=&quot;please enter your current password&quot; formControlName=&quot;currentPassword&quot; /&gt;
                      &lt;mat-error *ngIf=&quot;currentPasswordFormControl.hasError('required')&quot;&gt;
                          &lt;strong&gt;current password&lt;/strong&gt; is required
                      &lt;/mat-error&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field class=&quot;center-text&quot;&gt;
                      &lt;input matInput placeholder=&quot;please enter your new password&quot; formControlName=&quot;newPassword&quot; /&gt;
                      &lt;mat-error *ngIf=&quot;newPasswordFormControl.hasError('required')&quot;&gt;
                          &lt;strong&gt; new password &lt;/strong&gt; is required  
                      &lt;/mat-error&gt;
                  &lt;/mat-form-field&gt;
                  &lt;mat-form-field class=&quot;center-text&quot;&gt;
                      &lt;input matInput placeholder=&quot;please confirm your new password&quot;
                          formControlName=&quot;confirmNewPassword&quot; /&gt;
                      &lt;mat-error *ngIf=&quot;confirmNewPasswordFormControl.hasError('required')&quot;&gt;
                           &lt;strong&gt; confirm new password&lt;/strong&gt; is required
                      &lt;/mat-error&gt;
                  &lt;/mat-form-field&gt;
              &lt;/mat-card-content&gt;
  
              &lt;mat-card-actions&gt;
                  &lt;button mat-raised-button color=&quot;primary&quot;&gt;
                      &lt;div *ngIf=&quot;isSubmitting&quot; class=&quot;loading&quot;&gt;
                          &lt;mat-spinner [diameter]=&quot;26&quot; color=&quot;accent&quot;&gt;&lt;/mat-spinner&gt;
                      &lt;/div&gt;
                      &lt;span *ngIf=&quot;!isSubmitting&quot;&gt;
                          submit
                      &lt;/span&gt;
                  &lt;/button&gt;
              &lt;/mat-card-actions&gt;
          &lt;/form&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/acG7C.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/acG7C.jpg" alt="enter image description here" /></a></p>