Question

我有一个国家/地区类，其中有一个属性，用于定义相关国家/地区的有效邮政编码的正则表达式（字符串格式）。

我有一个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-invalid类没有正确应用。

有关如何使用模式属性进行操作的想法吗？

Answer 1

现在通过绑定到pattern属性来支持它。

以下代码来自：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 {}

Answer 2

目前不支持此功能。 .select2-container--default .select2-results > .select2-results__options { max-height: 200px }需要在DOM中静态添加。

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

使用Angular 2绑定到模式属性

2 个答案: