title: Display custom validator error with mat-error
body: <p>I come to you for talking about a problem with angular material. In fact, I think it's an issue, but I prefer looking for a misunterstanding first.</p>
  
  <p>The first thing about my problem is the context, i try to do a simple form containing two inputs : a password  and its' confirmation.</p>
  
  <p><strong>user-form.component.ts</strong>  </p>
  
  <pre class="lang-js prettyprint-override"><code>this.newUserForm = this.fb.group({
    type: ['', Validators.required],
    firstname: ['', Validators.required],
    lastname: ['', Validators.required],
    login: ['', Validators.required],
    matchingPasswordsForm: this.fb.group(
      {
        password1: ['', Validators.required],
        password2: ['', Validators.required],
      },
      {
        validator: MatchingPasswordValidator.validate,
      },
    ),
    mail: ['', [Validators.required, Validators.pattern(EMAIL_PATTERN)]],
    cbaNumber: [
      '411000000',
      [Validators.required, Validators.pattern(CBANUMBER_PATTERN)],
    ],
    phone: ['', [Validators.required, Validators.pattern(PHONE_PATTERN)]],
  }
  </code></pre>
  
  <p>My interest is about matchingPasswordsForm FormGroup. You can see the validator on it.</p>
  
  <p>Here the validator: </p>
  
  <p><strong>matching-password.validator.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export class MatchingPasswordValidator {
      constructor() {}
  
      static validate(c: FormGroup): ValidationErrors | null {
          if (c.get('password2').value !== c.get('password1').value) {
              return { matchingPassword: true};
          }
          return null;
      }
  }
  </code></pre>
  
  <p>and the HTML.</p>
  
  <p><strong>user-form.component.html</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row" formGroupName="matchingPasswordsForm"&gt;
      &lt;mat-form-field class="col-md-6 col-sm-12"&gt;
          &lt;input matInput placeholder="Mot de passe:" formControlName="password1"&gt;
          &lt;mat-error ngxErrors="matchingPasswordsForm.password1"&gt;
              &lt;p ngxError="required" [when]="['dirty', 'touched']"&gt;{{requiredMessage}}&lt;/p&gt;
          &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
  
      &lt;mat-form-field class="col-md-6 col-sm-12"&gt;
          &lt;input matInput placeholder="Confirmez" formControlName="password2"&gt;
          &lt;mat-error ngxErrors="matchingPasswordsForm.password2"&gt;
              &lt;p ngxError="required" [when]="['dirty', 'touched']"&gt;{{requiredMessage}}&lt;/p&gt;
          &lt;/mat-error&gt;
          &lt;!--                 --&gt;
          &lt;!-- problem is here --&gt;
          &lt;!--                 --&gt;
          &lt;mat-error ngxErrors="matchingPasswordsForm" class="mat-error"&gt;
              &lt;p ngxError="matchingPassword" [when]="['dirty', 'touched']"&gt;{{passwordMatchErrorMessage}}&lt;/p&gt;
          &lt;/mat-error&gt;
          &lt;!-- ^^^^^^^^^^^^^^^^ --&gt;
          &lt;!-- /problem is here --&gt;
          &lt;!--                  --&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have surrounded the interesting code with comments.</p>
  
  <p>Now, some explanation : With  tag, when password2 is touched, my error is displayed :</p>
  
  <p><a href="https://i.stack.imgur.com/XT5en.png" rel="noreferrer">Password2 just touched</a></p>
  
  <p>But, when I write a wrong password, error is not displayed anymore :</p>
  
  <p><a href="https://i.stack.imgur.com/aHiP7.png" rel="noreferrer">Wrong password2</a></p>
  
  <p>First I thought I was misunderstanding custom validator utilisation. BUT when I  replace  with  the  whole thing  works perfectly !</p>
  
  <p><strong>replace error by hint</strong>
  </p>
  
  <pre><code>&lt;mat-hint ngxErrors="matchinghPasswordsForm"&gt;
      &lt;p ngxError="matchingPassword" [when]="['dirty', 'touched']"&gt;{{passwordMatchErrorMessage}}&lt;/p&gt;
  &lt;/mat-hint&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/tbW3g.png" rel="noreferrer">With mat-hint tag</a></p>
  
  <p>I hope I was clear, I really want your point of view before posting an issue on material design github.</p>
  
  <p>If I misunterstood something, please light my fire on what I missed.</p>
  
  <p>A last thing, my tests were done with ngxerrors and *ngif. To be more readable my code sample only use ngxerrors .</p>
  
  <p>Thanks in advance for the time you will take.</p>