title: angular text box avoid only 1 special character
body: <p>Good day,</p>
  <p>I have a requirement which is only need to not allow only 1 special character for user input, which is <code>~</code>. The following is my code:</p>
  <pre><code>&lt;div class=&quot;form-input &quot;&gt;
            &lt;input class=&quot;pass&quot; [type]=&quot;'password'&quot; name=&quot;newPassword&quot;
              placeholder=&quot;New Password&quot; required pattern=&quot;^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#&amp;()-/$=&lt;&gt;?]).*$&quot; #newPassword=&quot;ngModel&quot;
              [(ngModel)]=&quot;newPassword&quot; (ngModelChange)=&quot;checkNewPassword()&quot;
              (click)=&quot;onInputFocus()&quot; minlength={{changePasswordFormCriteria.minPwrdLength}}
              maxlength=30 (blur)=&quot;checkNewOldPassVal()&quot;&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;div *ngIf=&quot;newPassword.errors?.pattern &amp;&amp; loginPasswordForm.submitted&quot; class=&quot;form-errors&quot;&gt;
            New Password must consist at least one uppercase, one lowercase letter, one number and one special characters within this range ! @ # &amp; ( ) - ? / $ = &lt; &gt;
          &lt;/div&gt;
  </code></pre>
  <p>As you can see, I exclude the <code>~</code> character from the <code>pattern</code>. This is work if I only key in only 1 special character <code>~</code>, for example, &quot;password~abc&quot;, this will prompt the error message in <code>newPassword.errors?.pattern</code>. This is correct and this is match with requirement.</p>
  <p>However, if I include other special character, for example, I key in &quot;password@~abc&quot;, this will not prompt error message, it will allow to go through. I am wondering I not include the <code>~</code> in the pattern, but not sure why it still can pass through.</p>
  <p>May I know what mistake I did?</p>