title: Regular expression logic
body: <p>I'm developing a web application using Angular 6. I have a question:
  I'm creating a custom input component (for text input) such as:</p>
  
  <pre><code>@Component({
    selector: 'input-text',
    templateUrl: './input-text.component.html'
    ]
  })
  export class InputTextComponent {
  
    @Input() pattern?: string;
  
  }
  </code></pre>
  
  <p>I would like a user can insert a <strong>regular expression</strong> for the validation of the input field, in this way:</p>
  
  <pre><code>&lt;input-text pattern="^[a-z0-9_-]{8,15}$"&gt;&lt;/input-text&gt;
  </code></pre>
  
  <p>The <strong>template of my component</strong> is defined like this:</p>
  
  <pre><code>&lt;input type="text" [attr.pattern]="pattern"/&gt;
  </code></pre>
  
  <p>Unfortunately I know absolutely nothing about regular expressions. 
  I would like to do two things:</p>
  
  <p>1 - Create a method that checks the validity of the regular expression and changes the visual style.</p>
  
  <p>2 - Make sure that if the input (with a <code>pattern</code> field) is inserted into a form, the attribute <code>form.valid</code> remains false until the expression is valid.
  Thanks for your help!</p>