8

我目前正在用 ionic 2 (Angular 2) 编写一个简单的表单。我想知道如何在验证中添加一个简单的正则表达式模式：

我基本上有这个：

<form>
    <ion-input stacked-label>
        <ion-label>{{label.msisdn}}</ion-label>
        <input type="text"
               [(ngModel)]="msisdn"
               ngControl="msisdnForm"
               required
               maxlength="10"
               minlength="10"
               pattern="06([0-9]{8})"
               #msisdnForm="ngForm"
        >
    </ion-input>
    <button [disabled]="!msisdnForm.valid" block (click)="requestActivationCode()">
        {{label.requestActivationCode}}
    </button>
</form>

正在获取最大长度、最小长度和所需（如果不满足条件，则禁用该按钮）。现在我想将输入限制为数字并在其前面加上 06（数字最少的荷兰电话号码）。

然而，该模式并未在验证中被拾取。我可以这样做，还是需要代码方法？

4

2 回答 2

8

将模式添加到变量

var pattern=/06([0-9]{8})/;

并将属性绑定到它

 <input type="text"
               [(ngModel)]="msisdn"
               ngControl="msisdnForm"
               required
               maxlength="10"
               minlength="10"
               [pattern]="pattern"
               #msisdnForm="ngForm"
        >

似乎这个 PR https://github.com/angular/angular/pull/6623/files需要先登陆。

还有一个未解决的问题https://github.com/angular/angular/issues/7595 这可以防止pattern被绑定。该模式需要静态添加到 DOM（没有绑定）才能工作。

于 2016-01-25T12:51:29.530 回答
7

我提出了更多细节（Angular 2.0.8 - 2016 年 3 月 3 日）： https ://github.com/angular/angular/commit/38cb526

来自回购的例子：

<input [ngControl]="fullName" pattern="[a-zA-Z ]*">

我测试了它，它工作了:) - 这是我的代码：

<form (ngSubmit)="onSubmit(room)" #roomForm='ngForm'  >
...
<input
  id='room-capacity'
  type="text"
  class="form-control"
  [(ngModel)]='room.capacity'
  ngControl="capacity"
  required
  pattern="[0-9]+"
  #capacity='ngForm'>

2017 年 9 月更新

我只想说，目前当我有更多经验时，我通常使用以下“廉价”方法进行数据验证：

验证仅在服务器端（根本不是角度！），如果出现问题，则服务器（Restful API）返回一些错误代码，例如HTTP 400并在响应正文中跟随 json 对象（我把它放在err变量中）：

this.err = { 
    "capacity" : "too_small"
    "filed_name" : "error_name", 
    "field2_name" : "other_error_name",
    ... 
}

（如果服务器以不同的格式返回验证错误，那么您通常可以轻松地将其映射到上述结构）

在 html 模板中，我使用单独的标签（div/span/small 等）

<input [(ngModel)]='room.capacity' ...>
<small *ngIf="err.capacity" ...>{{ translate(err.capacity) }}</small>

如您所见，当“容量”出现错误时，将显示带有错误翻译（到用户语言）的标签。这种方法具有以下优点：

  • 这很简单
  • 在 Angular 中，我们不会将服务器中（并且必须）的验证代码加倍（在正则表达式验证的情况下，这可以防止或使ReDoS攻击复杂化）
  • 我们可以完全控制向用户显示错误的方式（此处为标签中的 egzample <small>）
  • 因为在服务器响应中我们返回error_name（而不是直接的错误消息），我们可以通过仅修改前端角度代码（或带有翻译的文件）轻松更改错误消息（或翻译它）。所以在那种情况下，我们不需要接触后端/服务器代码。

当然有时（如果需要 - 例如，从不发送到服务器的 retypePassword 字段）我对上述方法进行了例外处理并在角度进行了一些验证（但使用类似的“ this.err”机制来显示错误（所以我不pattern直接在input标记，而是在用户引发正确的事件（如输入更改或保存）后，我在某些组件方法中进行正则表达式验证。

于 2016-03-10T19:39:57.960 回答