使用Angular 2绑定到模式属性

我有一个国家类，它具有为相关国家的有效邮政编码定义正则表达式（字符串格式）的属性。使用Angular 2绑定到模式属性

我有一个国家的HTML选择，并试图将所选国家的正则表达式绑定到邮政编码输入框的模式属性。

由于某些原因，验证始终显示为无效（基于ng-invalid类的存在）。正则表达式肯定没有被验证，因为我在外部验证器中运行了相同的正则表达式，并且验证已经过去了。

这是一些代码。（A plunk of this is available here）

export var COUNTRIES : Array<ICountry> = [ 
{id: 1, name: "United States", zipRegEx: "^\\d{5}(-?\\d{4})?$", requireState: true}, 
{id: 2, name: "Canada", zipRegEx: "^[ABCEFGHJKLMNPRSTVXY][0-9][ABCEFGHJKLMNPRSTVWXYZ]\\s?[0-9][ABCEFGHJKLMNPRSTVWXYZ][0-9]$", requireState: true}, 
{id: 3, name: "Brazil", zipRegEx: "", requireState: false}, 
{id: 4, name: "Australia", zipRegEx: "^(\\d{4})$", requireState: false}, 
{id: 5, name: "Faroe Islands", zipRegEx: "^\\d{2}$", requireState: false}, 
{id: 6, name: "Papua New Guinea", zipRegEx: "", requireState: false} 
]; 

<label>Country</label> 
<select [ngModel]="address.country.id" (change)="countryChange($event)" required> 
    <option value="">-- Select a Country --</option> 
    <option *ngFor="#country of countries | async | orderBy:{property:'name'}" [value]="country.id" >{{country.name}}</option> 
</select><br> 

<label>Postal Code</label> 
<input type="text" [(ngModel)]="address.postalcode" [pattern]="address.country?.zipRegEx" /><br>

如果我使用的开发工具，我可以看到，正在与该模式的价值实际上是被设置绑定;但是，ng无效类未正确应用。

有关如何使用模式属性可以工作的任何想法？

来源

2016-03-15 RHarris

目前不支持此功能。需要在DOM中静态添加pattern。

相关Angular2问题https://github.com/angular/angular/issues/7595

来源

2016-03-15 16:25:09

不'[attr.pattern]'是否行得通呢？ –

模式验证器通过'构造函数（@Attribute（'pattern'）pattern）读取属性''，我很确定这不适用于以这种方式添加的属性。 –

你知道是否有计划将这种能力添加到Angular 2中？你提供的链接似乎表明，很多人认为它是一个好主意，但我没有看到任何官方的肯定，验证者将被加强与财产绑定工作。 – RHarris

它是通过结合模式属性现在支持。下面

代码为：https://plnkr.co/edit/UD9DEoBJ7APs1u4bmGEF?p=info 通过Github的用户：alexlukin-softgrad

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import {FormsModule} from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form #codeInput="ngForm"> 
     <input type="text" [pattern]="pattern" name="code" [(ngModel)]="codeObj.code" /> 
     <div>valid: {{codeInput.valid}}</div> 
    </form> 
    `, 
}) 
export class App { 
    codeObj = { 
    code: "" 
    }; 
    pattern = "^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$"; 
} 

@NgModule({ 
    imports: [ BrowserModule, FormsModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}

来源

2017-07-10 17:19:11 jemiloii

使用Angular 2绑定到模式属性

回答

相关问题