Angular 2 NgFor模式錯誤消息未顯示

Question

我試圖在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>

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