title: Special character in a pattern angular formController
body: <p>Like in the following <a href="https://stackblitz.com/edit/custom-form-control-uajxxq" rel="nofollow noreferrer">StackBlitz</a></p>
  
  <p>I have a form control with a pattern validation</p>
  
  <pre><code>  formController = new FormControl(null, [Validators.required, Validators.pattern('^, &amp;, *, (, ), +, -, {, }, [, ], &lt;, &gt;,')]);
  </code></pre>
  
  <p>In the HTML, I have </p>
  
  <pre><code>&lt;div [innerHTML]="'Write : ^, &amp;, *, (, ), +, -, {, }, [, ], &lt;, &gt;,'"&gt;&lt;/div&gt;
  &lt;form&gt;
        &lt;input matInput type="text" [formControl]="formController" autocomplete="off" placeholder="^, &amp;, *, (, ), +, -, {, }, [, ], &lt;, &gt;,"&gt;
          &lt;div *ngIf="formController.hasError('required')"&gt;
              POPUP.DELETE_CONFIRMATION_UNMATCHED_REQUIRED
          &lt;/div&gt;
          &lt;div *ngIf="formController.hasError('pattern')"&gt;
              POPUP.DELETE_CONFIRMATION_UNMATCHED_PATTERN
          &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The problem is, the pattern is never matched. </p>
  
  <p>In the exemple, the pattern in static, but in my app, the pattern is the name of a field, and it can contain any characters. </p>
  
  <p>The formControl do not work only when the pattern include special character, it works ok for any other name.</p>
  
  <p>How can I fix it ? </p>
  
  <p>EDIT : The thing is, this is for a deletion confirmation like in github repo.</p>
  
  <p>When you delete the thing, you have to type exactly the name of the repo.</p>
  
  <p>In the app, name can include special character so, if the name of the repo is <code>^, &amp;, *, (, ), +, -, {, }, [, ], &lt;, &gt;,'</code> then I need to type hexactly <code>^, &amp;, *, (, ), +, -, {, }, [, ], &lt;, &gt;,'</code> and nothing else, if the name is <code>myProject1</code> only <code>myProject1</code> will work</p>