title: Angular Material Mat-error Showing error for valid inputs, while validating with regex
body: <p>Creating a signup form using angular material, It is displaying errors even if there is no error.</p>
  <p>For a valid input it is displaying the error Invalid Input.
  I've removed that mat-error condition the field is turning red while entering data.</p>
  <p><em><strong>The status inside the control is showing the field is valid on submit.</strong></em></p>
  <p><a href="https://i.stack.imgur.com/6oerR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6oerR.png" alt="enter image description here" /></a></p>
  <p>The error conditions are in in global constants file.
  -Global const ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class globalConstants{
  public static genericErr:string="Someting wnet wrong,Please try again";
  public static usrname:string='[a-zA-Z0-9 ]*';
  }</code></pre>
  </div>
  </div>
  </p>
  <p>HTML-</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-form-field appearance="fill" fxFlex&gt;
   &lt;mat-label&gt;User Name&lt;/mat-label&gt;
  &lt;input matInput formControlName="usrname" required&gt;
  &lt;mat-error *ngif="signUpForm.controls.usrname.touched &amp;&amp; signUpForm.controls.usrename.invalid"&gt;
  &lt;span *ngIf="signUpForm.controls.usrname.errors.required"&gt;User Name is Mandatory&lt;/span&gt;
  &lt;span *ngIf="signUpForm.controls.usrname.errors.pattern"&gt;Ivalid Input&lt;/span&gt;
  &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;}</code></pre>
  </div>
  </div>
  </p>
  <p>Signup Ts File:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { globalConstants } from '../shared/globalConst';
  signUpForm: any = FormGroup;
  ngOnInit(): void {
  this.signUpForm = this.formBuilder.group({usrname: ['Enter Username', [Validators.required,  Validators.pattern(globalConstants.usrname)]],   
   </code></pre>
  </div>
  </div>
  </p>
  <p>Kindly assist with your expertise.</p>