使用模式Angular 2进行输入验证 [英] Input validation with pattern Angular 2

问题描述

我目前正在离子2（Angular 2）中编写一个简单的表格。我想知道如何在验证中添加一个简单的正则表达式模式：

I'm currently writing a simple form in ionic 2 (Angular 2). I was wondering how I'd add a simple regular expression pattern to the validation:

我基本上有这个：

<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>

maxlength，minlength&正在拾取所需的（如果条件不满足，则禁用该按钮）。现在我想将输入限制为数字，并在其前面添加06（荷兰电话号码，最小数量）。

The maxlength, minlength & required are being picked up (the button is disabled if conditions not met). Now I want to limit the input to numeric and prefix it with 06 (Dutch phone number with minimum amount of numbers).

然而，验证模式没有被提取。我可以这样做，还是需要代码方法？

The pattern is however not picked up in the validation. Can I do it this way, or do I need a code approach?

推荐答案

将模式添加到变量

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 需要先登陆。

Seems this PR https://github.com/angular/angular/pull/6623/files needs to land first.

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

There is still an open issue https://github.com/angular/angular/issues/7595 This prevents pattern being bound to. The pattern needs to be statically added to the DOM (without binding) to work.

这篇关于使用模式Angular 2进行输入验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！