regex - Angular 2表单验证模式正则表达式错误

标签 regex forms angular validation design-patterns

我正在创建一个 Angular 形式的表单,要求名称字段仅包含字母数字字符和空格。为此,我使用模式属性:

<input type="text" class="form-control" placeholder="Name" name="Name" [(ngModel)]="name" required pattern="/^[a-z\d-_\s]+$/i" #nameField="ngModel">

当字符串不匹配时,我想显示以下错误消息:

<div *ngIf="nameField.errors">
   <div [hidden]="!nameField.errors.pattern">
       <p class="has-error">
          Only spaces, letters, and numbers are allowed.
       </p>
   </div>
</div>

但是,似乎即使字符串应该匹配正则表达式,我仍然可以看到错误消息。有什么想法吗?

最佳答案

我想这里的问题是正则表达式的语法格式不正确:

 <form novalidate #f="ngForm" novalidate>
    <input type="text" 
    class="form-control" 
    placeholder="Name" name="Name" 
    [(ngModel)]="name" 
    required pattern="^[A-Z\\a-z\\d-_\\s]+$" 
    #nameField="ngModel" >
    <div>
      <div *ngIf="nameField.errors?.pattern">
        <p class="has-error">
          Only spaces, letters, and numbers are allowed.
        </p>
        hame: {{nameField.errors | json}}
     </div>
    </div>
  </form>

看看这个plunkr

关于regex - Angular 2表单验证模式正则表达式错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44350637/

相关文章:

c# - 使用正则表达式或 JSON 提取数据

javascript - 匹配任何不是字符串 "ABCD"的正则表达式

html - 如何将所有输入按钮与所有其他元素水平对齐

forms - 如何在提交表单时使用 dodirect payment paypal?

angular - 找不到自定义管道 ionic 4 |找不到管道

Angular 监听 rxjs observable 的订阅开始?

python - 为什么此环视正则表达式返回意外结果?

javascript - 从电话号码中去掉最后一个连字符 (-)

javascript - 如何使用 Vuejs 发送电子邮件?

angular - 如何在 Typescript 中动态禁用或启用 ng-multiselect-dropdown