p4.component.html

<h5>輸入欄位驗證</h5>

<table border="2">
  製作三個directive 輸入欄位驗證<br>
  一.必須輸入大於０，若輸入小於或等於0，則alert訊息<br>
  二.只能輸入數字，若輸入欄位不符，則alert訊息<br>
  三.只能輸入英文兩碼＋數字三碼，若輸入欄位不符，則alert訊息</table>

<br>
  <!-- 欄位一 : <input class="number"
            placeholder="輸入後請按enter"
            autofocus
            (keyup.enter)="addNumber($event.target)"
            ><br><br>
  欄位二 : <input class="number"
            placeholder="輸入後請按enter"
            autofocus
            (keyup.enter)="addNumber2($event.target)"><br><br>
  欄位三 : <input class="number"
            placeholder="輸入後請按enter"
            autofocus
            (keyup.enter)="addNumber3($event.target)"><br><br> -->

  欄位一 : <input type="number" placeholder="請輸入" name="test" [(ngModel)]="test">
          <button (click)="checkNumber(test)">確認</button> <br>
  欄位二 : <input type="number" placeholder="請輸入" name="test2" [(ngModel)]="test2">
          <button (click)="checkNumber2(test2)">確認</button> <br>

  欄位三 : <input type="text" placeholder="請輸入" name="test3" [(ngModel)]="test3"
            onkeyup="this.value=this.value.replace(/[^\a-\z\A-\Z0-9]/g,'');">
          <button (click)="checkNumber3(test3)">確認</button> <br>

  <router-outlet></router-outlet>