Angular 2 NgFor 模式错误消息未显示答案

【问题标题】：Angular 2 NgFor Pattern Error Message Not ShowingAngular 2 NgFor 模式错误消息未显示
【发布时间】：2017-12-22 03:08:39
【问题描述】：

我正在尝试在 ngFor 循环中输入带有正则表达式要求的输入，但是当我放入与所需模式不匹配的内容时，没有看到预期的错误消息。

“测试”永远不会隐藏，<div *ngIf="id?.hasError('pattern')"> 永远不会显示，即使我输入了错误的模式。我可以看到输入失败，因为我使用的是 Material Design，输入下划线的颜色变为红色，但我没有看到错误消息方面的任何变化。

这是我目前的代码：

（我拥有的键管道是自定义管道，因为 item 是由对象组成的对象，因此将包含的对象分解为键/值对。）

<div *ngFor="let item of items | keys">

  <md-input-container>
    <input
      mdInput
      placeholder={{item.placeholder}}
      name={{item.name}}
      pattern="\d{7}"
      [(ngModel)]="item.currentValue"
      #id="ngModel"
    >
  </md-input-container>

  <div
    [hidden]="id?.valid || id?.pristine"
  >
    <p>Test</p>
    <div *ngIf="id?.hasError('pattern')">
      Pattern should be xxxxxxx 
    </div>
  </div>

</div>

【问题讨论】：

我已经告诉过你你的模式是错误的。如果您需要匹配一个 7 位的字符串，只需使用 "\d{7}"。或者如果它可以为空"(?:\d{7})?"。 [\d{7}]* 匹配 0 个或多个数字字符，{、7 或 }。
感谢您的提醒，即使在将模式更改为“\d{7}”后，我仍然遇到同样的问题，即当输入验证失败时消息未隐藏/显示。

标签： javascript regex html angular

【解决方案1】：

用下一个方法试试：

<div *ngFor="let item of items | keys">

<md-input-container>
<input
  mdInput
  placeholder={{item.placeholder}}
  name={{item.name}}
  pattern="\d{7}"
  [(ngModel)]="item.currentValue"
  #id="ngModel"
>
</md-input-container>

<div [hidden]="!displayValid(id)">
<p>Test</p>        
      Pattern should be xxxxxxx 
</div>
</div>

还有这个组件的 .ts 文件中的乐趣：

 displayValid(inputRef: any): boolean {
        let errors: any = inputRef.errors;

        return errors && errors.pattern;
 }

【讨论】：

【解决方案2】：

尝试将name={{item.name}} 更改为name="id"。

【讨论】：