Question

我在Angular2 RC5中遇到正则表达式问题。如果我硬编码正则表达式（如下所示），一切都很完美。

<input type="text" 
       name="date"
       class="form-control"
       [(ngModel)]="date" 
       placeholder="e.g. 24/05/2016" 
       (change)="updateAvailability()" 
       pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
       title="Date Format (DD/MM/YYYY)"
       required />

但是，模式是作为组件的一部分动态构建的，所以当我尝试绑定到模式属性（如下所示）时，验证不再有效。

<input type="text" 
       name="date"
       class="form-control"
       [(ngModel)]="date" 
       placeholder="e.g. 24/05/2016" 
       (change)="updateAvailability()" 
       [pattern]="datePattern"
       title="Date Format (DD/MM/YYYY)"
       required />

我尝试使用插值，例如

pattern="{{ datePattern }}"

但这会产生完全相同的结果。

当我在浏览器中使用Developer Tools查看DOM时，一切看起来都是正确的，但Angular似乎正在添加一个 ng-reflect-pattern （见下文）属性，但完全相同值。我无法在任何地方找到相关文档，也不确定这是否与问题有关。

<input name="date" 
       title="Date Format (DD/MM/YYYY)" 
       class="form-control ng-untouched ng-pristine ng-invalid" 
       required="" 
       type="text" 
       placeholder="e.g. 24/05/2016" 
       pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$" 
       _ngcontent-abf-3="" 
       ng-reflect-name="date" 
       ng-reflect-pattern="^(11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26)\/(8|08)\/(2016)$"
       ng-reflect-model=""></input>

我无法理解为什么模式属性在DOM中可以是相同的，但是对模式进行硬编码是有效的，并且对组件的绑定不会。

任何想法都会受到高度赞赏吗？

干杯。

Angular2 RC5输入模式绑定无法正常工作

0 个答案: