簡易版題目(練習一二三四)大致完成 動工進階版練習五

src/app/home/home.component.html

@@ -53,8 +53,6 @@ cnt:<input type="number" min="1" max="7"><br>
       <th>icon</th>
   </tr>
 
-  <!-- TODO  尚欠icon display-->
-
   <tbody *ngFor = "let l of list">
       <tr *ngFor = "let item of l.list_">
           <td>

src/app/p4/p4.component.html

@@ -5,9 +5,9 @@
   一.必須輸入大於０，若輸入小於或等於0，則alert訊息<br>
   二.只能輸入數字，若輸入欄位不符，則alert訊息<br>
   三.只能輸入英文兩碼＋數字三碼，若輸入欄位不符，則alert訊息</table>
-<!-- TODO 卡在component.ts檔的if else語法-->
+
 <br>
-  欄位一 : <input class="test"
+  <!-- 欄位一 : <input class="number"
             placeholder="輸入後請按enter"
             autofocus
             (keyup.enter)="addNumber($event.target)"
@@ -19,5 +19,15 @@
   欄位三 : <input class="number"
             placeholder="輸入後請按enter"
             autofocus
-            (keyup.enter)="addNumber3($event.target)"><br><br>
+            (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>

src/app/p4/p4.component.ts

@@ -9,52 +9,53 @@ export class P4Component implements OnInit {
 
   number = '';
   value2: any;
+  test: number;
+  test2: number;
+  test3 = '';
 
-  addNumber(inputRef: HTMLInputElement): void {
-    console.log(inputRef.value);
-    inputRef.value = '';
+  checkNumber(test): void {
+    console.log(test);
 
-    this.value2 = +inputRef.value;
-
-    if (
-      this.value2 > 0
-    ) {
-      alert('輸入正確');
+    if (test <= 0 || test === undefined) {
+      alert('必須輸入大於0的數字');
     } else {
-    alert('請輸入大於0的數字');
+      alert('輸入正確');
     }
   }
 
-  addNumber2(inputRef: HTMLInputElement): void {
-    console.log(inputRef.value);
-    inputRef.value = '';
+  checkNumber2(test2): void {
+    console.log(test2);
 
-    this.value2 = new Number(inputRef.value);
-
-    if (
-      this.value2 !== Number
-    ) {
+    if (test2 === undefined || test2 === null) {
       alert('只能輸入數字');
     } else {
-    alert('輸入正確');
+      alert('輸入正確');
     }
   }
 
-  addNumber3(inputRef: HTMLInputElement): void {
-    console.log(inputRef.value);
-    inputRef.value = '';
+  checkNumber3(test3): void {
+    console.log(test3);
 
-    this.value2 = new Number(inputRef.value);
-
-    if (
-      this.value2 !== Number
-    ) {
-      alert('欄位只能輸入英文兩碼 + 數字三碼');
+    if (test3.match(/([A-z])/g).length === 2 && (test3.match(/([0-9])/g).length === 3)) {
+      alert('輸入正確');
     } else {
-    alert('輸入正確');
+      alert('只能輸入英文兩碼 + 數字三碼');
     }
   }
 
+  // addNumber(inputRef: HTMLInputElement): void {
+  //   console.log(inputRef.value);
+  //   inputRef.value = '';
+
+  //   this.value2 = +inputRef.value;
+
+  //   if (this.value2 <= 0) {
+  //     alert('請輸入大於0的數字');
+  //   } else {
+  //   alert('輸入正確');
+  //   }
+  // }
+
 
   constructor() { }
 

src/app/p5/p5.component.html

@@ -14,7 +14,7 @@
   <tr><td colspan="2">
   姓名: <input class="name"><br>
   性別: <input class="gender"><br>
-  手機電話(4-3-3): <input class="phoneNo"><br>
+  手機電話(4碼-3碼-3碼): <input class="phoneNo"><br>
   生日(YYYY/MM/DD): <input class="birth"><br>
   目前年收入(XXX,XXX): <input class="income"><br>