Angular 2 NgFor 正则表达式消息错误 - [(ngModel)] 有效，但 ngModel 未定义答案

【问题标题】：Angular 2 NgFor Regex Message Error - [(ngModel)] works but ngModel is undefinedAngular 2 NgFor 正则表达式消息错误 - [(ngModel)] 有效，但 ngModel 未定义
【发布时间】：2017-07-14 16:31:44
【问题描述】：

我正在尝试在 ngFor 循环中输入带有正则表达式要求的输入，但我收到“无法读取未定义的属性‘有效’”错误，我将其用作页面加载时弹出的错误消息。

这是我目前的代码：

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

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

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

  <div 
    [hidden]="id.valid || id.pristine"
  >
    <div [hidden]="!id.hasError('pattern')">
        *Describe required pattern here*
    </div>
  </div>
  
</div>

从我读过的一些教程（如this one）中，我想这会起作用，但我显然遗漏了一些东西。

编辑

因为它是被要求的，所以这里是密钥管道。这是一个基本的管道，可以在互联网上找到类似的管道：

  transform(value): any {
    const keys = [];
    for (const key in value) {
      keys.push({key: key, value: value[key]});
    }

    return keys;
  }

【问题讨论】：

您要验证 7 位数字吗？使用pattern="[0-9]{7}"
我认为看看“keys”管道实现也会有所帮助
把你的正则表达式放到一个正则表达式测试器中，看看它告诉你什么以及它匹配什么。
您确定 ngModel 未定义吗？因为属性value 属于item。并且总是最好显示错误的完整行。只是为了向大家展示，因为人们经常犯愚蠢的错误。
正则表达式 [\d{7}] 表示“单个字符，可以是数字、左花括号、数字 7 或右花括号”。

标签： javascript regex angular ngfor

【解决方案1】：

尝试使用 elvis 运算符，如下所示：[hidden]="id?.valid || id?.pristine"

【讨论】：