Javascript 图形错误信息未显示的角度2

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

即使我输入了错误的模式，“测试”也从不隐藏，

也从不显示。我可以看到输入失败，因为我正在使用材质设计，并且输入下划线的颜色更改为红色，但我没有看到与错误消息相关的任何更改

这是我目前的代码：

（我使用的键管道是自定义管道，因为项是由对象组成的对象，因此可以将包含的对象分解为键/值对。）

试验

图案应为XXXXXX

尝试将

name={{{item.name}}

更改为

name=“id”

尝试下一种方法：

<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>

---

我已经告诉过你你的模式是错误的。如果需要匹配7位字符串，只需使用

“\d{7}”

。或者如果它可以是空的

“（？：\d{7}）？”

[\d{7}]*

匹配0个或多个数字字符，

{

、

7

或

}

。我非常感谢您的提醒，即使将模式更改为“\d{7}”，当输入验证失败时，我仍然有同样的问题，消息没有隐藏/显示。

<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>

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

        return errors && errors.pattern;
 }