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

问题描述

我目前正在用 ionic 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>

最大长度、最小长度和required 正在被拾取(如果不满足条件，按钮将被禁用).现在我想将输入限制为数字并在其前面加上 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这可以防止 pattern 被绑定.该模式需要静态添加到 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屋！