一、表單

1. 表單事件

   (keyup.enter)=""
   (blur)=""
   

2. 表單模板 在模板驅動表單中，你只要匯入了FormsModule就不用對<form>做任何改動來使用FormsModule。

   <form #loginForm="ngForm">
   

   loginForm變數是一個到NgForm指令的引用，它代表該表單的整體。

   Angular會在<form>標籤上自動建立並附加一個NgForm指令。

   NgForm指令為form增補了一些額外特性。 它會控制那些帶有ngModel指令和name屬性的元素，監聽他們的屬性（包括其有效性）。 它還有自己的valid屬性，這個屬性只有在它包含的每個控制元件都有效時才是真。

   不要忘記表單元素要有name屬性哦！！

   在內部，Angular 建立了一些FormControl，並把它們註冊到NgForm指令，再將該指令附加到

   標籤。 註冊每個FormControl時，使用name屬性值作為鍵值。

3. 通過 ngModel 跟蹤修改狀態與有效性驗證

   通過ngModel可以獲取表單元素的狀態，但是必要條件：

   • 元素要有name屬性
   • 通過ngModel進行雙向繫結（要繫結到ts檔案中的變數）
   • 如果要顯示它的狀態、需要給表單定義一個模板變數（#name）
   • 通過模板變數的className屬性顯示

   控制元件被訪問過: ng-touched ng-untouched 控制元件的值變化: ng-dirty ng-pristine 控制元件的值有效: ng-valid ng-invalid

   我們可以通過這類樣式控制表單的互動

   .ng-valid[required], .ng-valid.required{
     border-left: 5px solid #42A948; /* green */
   }
   
   .ng-invalid:not(form)  {
     border-left: 5px solid #a94442; /* red */
   }
   
   

   帶狀態提示框的表單

   <form #loginForm="ngForm">
   

<button type="submit" class="btn btn-default" [disabled]="!loginForm.form.valid">Submit

```
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">...

onSubmit(ele){
    console.log(ele.form.value);
  }
```

5. 表單驗證

   <div class="form-group">
   <div *ngIf="myemail.invalid && (myemail.dirty || myemail.touched)"
        class="alert alert-danger">
     <div *ngIf="myemail.errors.required">
       號碼不能為空
     </div>
     <div *ngIf="myemail.errors.pattern">
       號碼格式不正確
     </div>
   
   </div>
   

二、服務

1. 新建服務

   ng generate service name
   

   注意

   1. 服務是一個單例物件

   2. 服務可以在任何元件中單獨注入

      providers: [GlobalService,HeroService],
      

2. 使用服務

   在元件中匯入服務模組 在建構函式中建立服務物件

三、Http

1. 安裝HttpClient

   在使用HttpClient之前，要先安裝HttpClientModule以提供它。這可以在應用模組中做，而且只需要做一次。

   import {HttpClientModule} from '@angular/common/http';
   

2. http.get()

   匯入HttpClient

   import {HttpClient} from '@angular/common/http';
   
   

   傳送http.get(應該放在服務中)

   getPositions(callback){
   this.http.get('http://localhost:3000/positions').subscribe(function (data) {
     callback(data);
   },function (error) {
     console.log(error.message);
     }
   
   );
   

} ```

注意這個subscribe()方法。 所有從HttpClient返回的可觀察物件都是冷的（cold），也就是說，它們只是發起請求的藍圖而已。在我們呼叫subscribe()之前，什麼都不會發生，而當我們每次呼叫subscribe()時，就會獨立發起一次請求。

```
const req = http.post('/api/items/add', body);
// 0 requests made - .subscribe() not called.
req.subscribe();
// 1 request made.
req.subscribe();
// 2 requests made.
```

3. http.post()

   login(body,callback){
   this.http.post('http://localhost:3000/users/login',body).subscribe(function (data) {
       callback(data);
     },function (error) {
       console.log(error.message);
     }
   
   );
   

}