Question

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

＆＃34;试验＆＃34;永远不会隐藏，<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>

Answer 1

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

Answer 2

以下一种方式尝试：

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

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

2 个答案: