title: Angular 7: Formvalidation, Validators.pattern not working
body: <p>I need a from validation for only matching integers. Therefore I use the <code>pattern</code>validator with regex (see below). Additionally the field should not be empty, so I added the <code>required</code> validator.</p>
  <p>But the <code>pattern</code> error is never triggered. i read the angular docs and had a look to the source code of <code>pattern</code> and it still makes no sense to me. Additionally, I have read nearly every question on stackoverflow related to this topic. But I still can't figure out why the pattern is not working.</p>
  <p>Maybe some of you guys might be able help me, thank you!</p>
  <p>Here is my code component.ts:</p>
  <pre><code>// definition of the formcontrol
  hours = new FormControl('', [
    Validators.required,
    Validators.pattern('^[0-9]*$'),
  ])
  
  // for debugging
  log() {
    console.log('required: ', this.hours.hasError('required'));
    console.log('pattern: ', this.hours.hasError('pattern'));
    console.log('Erros: ', this.hours.errors);
  }
  </code></pre>
  <p>template:</p>
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput [formControl]=&quot;hours&quot; (input)=&quot;log()&quot;
      placeholder=&quot;Anzahl der ausbezahlten Überstunden&quot; type=&quot;number&quot;&gt;
    &lt;mat-error *ngIf=&quot;hours.hasError('required') &amp;&amp; !hours.hasError('pattern')&quot;&gt;
      Anzahl der Überstunden fehlt!
    &lt;/mat-error&gt;
    &lt;mat-error *ngIf=&quot;!hours.hasError('required') &amp;&amp; hours.hasError('pattern')&quot;&gt;
      Anzahl muss eine Ganzzahl sein!
    &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>Examples <code>inputValue=&quot;&quot;</code>:</p>
  <pre><code>required: true
  pattern: false
  Error: Object { required: true }
  </code></pre>
  <p><code>inputValue=&quot;1&quot;</code>:</p>
  <pre><code>required:  false
  pattern:  false
  Error:  null
  </code></pre>
  <p><code>inputValue=&quot;a&quot;</code>:</p>
  <pre><code>required:  true
  pattern:  false
  Error: Object { required: true }
  </code></pre>