title: html input pattern validation in angular 4 validate if string contains only pattern
body: <p>I have to validate an input in html using pattern in angular 4
  my pattern is </p>
  
  <pre><code>pat = /^(\s*#?\d{1,2}:\d{1,2}\s*(am|pm|AM|PM)\s*,?)+/;
  </code></pre>
  
  <p>and in html </p>
  
  <pre><code>&lt;input type="text" [pattern]="precisionTimePattern" #precisionSlotValue="ngModel" name="slot-value-precision" 
              id="slotValuePrecision" class="input-minimal" 
              [ngModel]="formObject.precisionType.slotValue" 
              [class.invalid]="(!precisionSlotValue.valid &amp;&amp; precisionSlotValue.touched) || (!precisionSlotValue.valid &amp;&amp; f.submitted)"&gt;
  </code></pre>
  
  <p>to match string only if "12:00 AM, 2:0 PM #3:00 PM" <br/> 
  but it also validate if user input "12:00 AM, 2:0 PM #3:00 PM  ajkcsbkajk"</p>