深入瞭解Angular（新手入門指南）

|-- project
	|-- .editorconfig // 用於在不同編輯器中統一程式碼風格
	|-- .gitignore // git中的忽略檔案列表
	|-- README.md // markdown格式的說明檔案
	|-- angular.json // angular的組態檔
	|-- browserslist // 用於設定瀏覽器相容性的檔案
	|-- karma.conf.js // 自動化測試框架Karma的組態檔
	|-- package-lock.json // 依賴包版本鎖定檔案
	|-- package.json // npm的包定義檔案
	|-- tsconfig.app.json // 用於app專案的ts組態檔
	|-- tsconfig.json // 整個工作區的ts組態檔
	|-- tsconfig.spec.json // 用於測試的ts組態檔
	|-- tslint.json // ts的程式碼靜態掃描設定
	|-- e2e // 自動化整合測試目錄
	|-- src // 原始碼目錄
 
|-- src // 原始碼目錄
	|-- favicon.ico // 收藏圖示
	|-- index.html // 單頁應用到宿主HTML
	|-- main.ts // 入口 ts 檔案
	|-- polyfills.ts // 用於不同瀏覽器的相容指令碼載入
	|-- styles.css // 整個專案的全域性css
	|-- test.ts // 測試入口
	|-- app // 工程原始碼目錄
	|-- assets // 資源目錄
	|-- environments // 環境設定
		|-- environments.prod.ts // 生產環境
		|-- environments.ts // 開發環境

@Component({
  selector: 'app-xxx',
  templateUrl: 'XXX',
  styleUrls: ['XXX'],
  encapsulation:ViewEncapsulation.Emulated  // 不寫則預設該值，表示該元件樣式只作用於元件本身，不影響全域性樣式，在 head 中生成單獨的 style 標籤
})

// 父元件呼叫子元件的時候傳入資料
<app-header [msg]="msg"></app-header>

// 子元件引入 Input 模組
import { Component, OnInit ,Input } from '@angular/core';

// 子元件中 @Input 裝飾器接收父元件傳過來的資料
export class HeaderComponent implements OnInit {
  @Input() msg:string
	constructor() { }
	ngOnInit() { }
}

// 子元件中使用父元件的資料
<h2>這是頭部元件--{{msg}}</h2>

// 子元件引入 Output 和 EventEmitter
import { Component,OnInit,Input,Output,EventEmitter} from '@angular/core';

// 子元件中範例化 EventEmitter
// 用 EventEmitter 和 @Output 裝飾器配合使用 <string> 指定型別變數
@Output() private outer=new EventEmitter<string>();

// 子元件通過 EventEmitter 物件 outer 範例廣播資料
sendParent(){
  this.outer.emit('msg from child')
}

// 父元件呼叫子元件的時候，定義接收事件，outer 就是子元件的 EventEmitter 物件 outer
<app-header (outer)="runParent($event)"></app-header>

// 父元件接收到資料會呼叫自己的 runParent, 這個時候就能拿到子元件的資料
// 接收子元件傳遞過來的資料
  runParent(msg:string){
   alert(msg);
}

// 給子元件定義一個名稱
<app-footer #footerChild></app-footer>

// 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';

// ViewChild 和子元件關聯起來
@ViewChild('footerChild') footer;

// 呼叫子元件
run(){
   this.footer.footerRun();
}

// 表現形式： <ng-content select="樣式類/HTML標籤/指令"></ng-content>

<ng-content select="[appGridItem]"></ng-content>

<div [ngClass]="{'red': true, 'blue': false}">
  這是一個 div
</div>

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>

// 注意引入：FormsModule
import { FormsModule } from '@angular/forms';

<input type="text" [(ngModel)]="inputValue"/> {{inputValue}}

<p *ngIf="list.length > 3">這是 ngIF 判斷是否顯示</p>

<div *ngIf="show else ElseContent">這是 ngIF 內容</div>
<ng-template #ElseContent>
  <h2>這是 else 內容</h2>
</ng-template>

// 結構性指令都依賴於 ng-template，*ngIf 實際上就是 ng-template 指令的 [ngIf] 屬性。

<ul>
  <li *ngFor="let item of list;let i = index;">
     {{item}} --{{i}}
  </li>
</ul>

<ul [ngSwitch]="score">
   <li *ngSwitchCase="1">已支付</li>
   <li *ngSwitchCase="2">已確認</li>
   <li *ngSwitchCase="3">已發貨</li>
   <li *ngSwitchDefault>已失效</li>
</ul>

@HostBinding('style.display') display = "grid";

// 用樣式繫結代替rd2的 this.setStyle('display','grid');

@HostListener('click',['$event.target'])

// 第一個引數是事件名，第二個是事件攜帶引數

/**
 * 在功能模組中定義子路由後，只要匯入該模組，等同於在根路由中直接定義
 * 也就是說在 AppModule 中匯入 HomeModule 的時候，
 * 由於 HomeModule 中匯入了 HomeRouting Module
 * 在 HomeRoutingModule 中定義的路由會合併到根路由表
 * 相當於直接在根模組中定義下面的陣列。
 * const routes = [{
 *   path: 'home',
 *   component: HomeContainerComponent
 * }]
 */

const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'news', component: NewsComponent},
  {path: 'newscontent/:id', component: NewscontentComponent},  // 設定動態路由
  {
    path: '',
    redirectTo: '/home',  // 重定向
    pathMatch: 'full'
	},
  //匹配不到路由的時候載入的元件 或者跳轉的路由
  {
     path: '**', /*任意的路由*/
     // component:HomeComponent
     redirectTo:'home'
  }
]

@NgModule({
  /**
   * 根路由使用 `RouterModule.forRoot(routes)` 形式。
   * 而功能模組中的路由模組使用 `outerModule.forChild(routes)` 形式。
   * 啟用路由的 debug 跟蹤模式，需要在根模組中設定 `enableTracing: true`
   */
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<h1>
  <a [routerLink]="['/home']">首頁</a>
  <a [routerLink]="['/home',tab.link]">首頁</a><!-- 路徑引數 -->
  <a [routerLink]="['/home',tab.link,{name:'val1'}]">首頁</a> <!-- 路徑物件引數 -->
  <a [routerLink]="['/home']" [queryParams]="{name:'val1'}">首頁</a> <!-- 查詢引數 -->
</h1>
<router-outlet></router-outlet>  <!-- 路由插座，佔位標籤 -->
<!--
  路由顯示的內容是插入到 router-outlet 的同級的下方節點
  而不是在 router-outlet 中包含
-->
<!--
  當事件處理或者達到某個條件時，可以使用手動跳轉
	this.router.navigate(['home']); 
	this.router.navigate(['home',tab.link]); 
	this.router.navigate(['home',tab.link，{name:'val1'}]); 
	this.router.navigate(['home'],{queryParams:{name:'val1'}}); 
-->

<h1>
    <a routerLink="/home" routerLinkActive="active">首頁</a>
    <a routerLink="/news" routerLinkActive="active">新聞</a>
</h1>

<h1>
   <a [routerLink]="[ '/home' ]" routerLinkActive="active">首頁</a>
   <a [routerLink]="[ '/news' ]" routerLinkActive="active">新聞</a>
</h1>

.active{
   color:red;
}

this.route.paramsMap.subscribe(params => {...})

this.route.queryParamsMap.subscribe(params => {...})

constructor(private routerInfo: ActivatedRoute){}
ngOnInit(){
	this.routerInfo.snapshot.params['id']
}

constructor(private routerInfo: ActivatedRoute){}
ngOnInit(){
	this.routerInfo.snapshot.params['id']
	this.routerInfo.snapshot.params['name']
}

const routes: Routes = [
    {path:'user',loadChildren:'./module/user/user.module#UserModule' },
    {path:'product',loadChildren:'./module/product/product.module#ProductModule'},
    {path:'article',loadChildren:'./module/article/article.module#ArticleModule'},
    {path:'**',redirectTo:'user'}
];

// 上面好像會報錯 Error find module 
// 設定懶載入
const routes: Routes = [
    {path:'user',loadChildren:()=>import('./module/user/user.module').then(mod=>mod.UserModule)},
    {path:'article',loadChildren:()=>import('./module/article/article.module').then(mod=>mod.ArticleModule)},
    {path:'product',loadChildren:()=>import('./module/product/product.module').then(mod=>mod.ProductModule)},
    {path:'**',redirectTo:'user'}
];

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class HeroService {
  aa = 'abc';
  constructor(){ }
  ngOnInit(){ }
}

import { HeroService } from '../../../services/hero/hero.service';
export class AComponent implements OnInit{
  constructor(private heroService : HeroService) {} //範例化
  ngOnInit(){
    console.log(this.heroService.aa)
  }
}

  constructor(private heroService : HeroService) {} // 依賴注入

// 首先寫 @injectable 我們需要注入的東西，比如說 product
@Injectable()
class Product {
  constructor(
    private name: string,
    private color: string,
    private price: number,
  ) { }
}

class PurchaseOrder {
  constructor(private product: Product){ }
}
 
export class HomeGrandComponent implements OnInit {
  constructor() { }
  ngOnInit() {
    // 構造一個 injector 用 create 方法 裡面 providers 陣列中寫我們需要構造的東西
    const injector = Injector.create({
      providers: [
        {
          provide: Product,
          // 構造 Product 在 useFactory 中就會把上面定義的 product 注入到這裡
          useFactory: () => {
            return new Product('大米手機', '黑色', 2999);
          },
          deps: []
        },
        {
          provide: PurchaseOrder,
          deps: [Product]
        },
        {
          provide: token,
          useValue: { baseUrl: 'http://local.dev' }
        }
      ]
    }); 
    console.log('injector獲取product', injector.get(PurchaseOrder).getProduct);
    console.log(injector.get(token));
  }

// .service.ts 中 @Injectable () 依賴注入
@Injectable()
export class HomeService {
  imageSliders: ImageSlider[] = [
    {
      imgUrl:'',
      link: '',
      caption: ''
    }
  ]
  getBanners() {
    return this.imageSliders;
  }
}

// 使用模組對應的.module.ts 中
@NgModule({
  declarations: [
    HomeDetailComponent,
  ],
  providers:[HomeService], // 在 providers 直接寫對應服務，直接將服務注入模組
  imports: [SharedModule, HomeRoutingModule]
})

<div>{{ 'Angular' | uppercase }}</div>  <!-- Output: ANGULAR -->

<div>{{ data | date:'yyyy-MM-dd' }}</div>  <!-- Output: 2022-05-17 -->

<div>{{ { name: 'ccc' } | json }}</div>  <!-- Output: { "name": "ccc" } -->

<!-- 
	管道可以接收任意數量的引數，使用方式是在管道名稱後面新增: 和引數值
	若需要傳遞多個引數則引數之間用冒號隔開 
-->

<!-- 可以將多個管道連線在一起，組成管道鏈對資料進行處理 -->
<div>{{ 'ccc' | slice:0:1 | uppercase }}</div>

// 引入PipeTransform是為了繼承transform方法
import { Pipe, PipeTransform } form '@angular/core'; 
// name屬性值慣用小駝峰寫法, name的值為html中 | 後面的名稱
@Pipe({ name: 'sexReform' }) 
export class SexReformPipe implements PipeTransform {
    transform(value: string, args?: any): string {
    // value的值為html中 | 前面傳入的值， args為名稱後傳入的引數
        switch(value){
            case 'male': return '男';
            case 'female': return '女';
            default: return '雌雄同體';
        } 
    }
}

// demo.component.ts
export Class DemoComponent {
    sexValue = 'female';
}

// demo.component.html
<span>{{ sexValue | sexReform }}</span>

// 瀏覽器輸出
女

// 管道可以鏈式使用，還可以傳參
<span> {{date | date: 'fullDate' | uppercase}} </span>
// 每一個自定義管道都需要實現 PipeTransform 介面，這個介面非常簡單，只需要實現 transform 方法即可。
// transform()方法引數格式 - transform(value: string, args1: any, args2?: any): 
// value為傳入的值（即為需要用此管道處理的值， | 前面的值）; 
// args 為傳入的引數(?:代表可選)；
// html 中使用管道格式 - {{ 資料 | 管道名 : 引數1 : 引數2 }}
// 與 component 一樣,pipe 需要先在 declarations 陣列中宣告後使用

ngAfterViewInit(){
   var boxDom:any=document.getElementById('box');
   boxDom.style.color='red';
}

class ElementRef<T> {
  constructor(nativeElement: T)
  nativeElement: T  //背後的原生元素，如果不支援直接存取原生元素，則為 null（比如：在 Web Worker 環境下執行此應用的時候）。
}

// 模版中給 DOM 起一個參照名字，以便可以在元件類或模版中進行參照 <div #myattr></div>

// 引入 ViewChild
import { ViewChild,ElementRef } from '@angular/core';

// 用 ViewChild 繫結 DOM	
@ViewChild('myattr') myattr: ElementRef;

// 在 ngAfterViewInit 生命週期函數裡可以很安全的獲取 ViewChild 參照的 DOM
ngAfterViewInit(){
   let attrEl = this.myattr.nativeElement;
}

// 給子元件定義一個名稱
<app-footer #footerChild></app-footer>

// 引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';

// ViewChild 和子元件關聯起來 
// 如果想參照模版中的 Angular 元件，ViewChild 中可以使用參照名，也可以使用元件型別
@ViewChild('footerChild') footer;

// @ViewChild('imageSlider', { static: true }) // static指定是動態還是靜態，在*ngFor或者*ngIf中是動態，否則即為靜態，動態為 true

// 呼叫子元件
run(){
   this.footer.footerRun();
}

<img
  #img
  *ngFor="let slider of sliders"
  [src]="slider.imgUrl"
  [alt]="slider.capiton"
>

// 使用 ViewChildren 參照獲取
@ViewChildren（’img‘）;

// 使用型別參照獲取
imgs: QueryList<ElementRef>;

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
    selector: '[testRenderer2]'
})

export class TestRenderer2Directive implements OnInit {
    constructor(private renderer: Renderer2, private el: ElementRef) {} // 範例化

    ngOnInit() {
    this.renderer.addClass(this.el.nativeElement, 'test-renderer2');
    // this.renderer.removeClass(this.el.nativeElement, 'old-class');
    }
}

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
    const div = this.renderer.createElement('div');
    const text = this.renderer.createText('Hello world!');
    
    this.renderer.appendChild(div, text);
    this.renderer.appendChild(this.el.nativeElement, div);
}

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
    this.renderer.setAttribute(this.el.nativeElement, 'aria-hidden', 'true');
}

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
    this.renderer.setStyle(
        this.el.nativeElement,
        'border-left',
        '2px dashed olive'
    );
}

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
    this.renderer.removeStyle(this.el.nativeElement, 'border-left');
}

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
    this.renderer.setProperty(this.el.nativeElement, 'alt', 'Cute alligator');
}

import {
  Component,
  OnInit,
  Renderer2,
  ViewChild,
} from '@angular/core';
import { AboxItemComponent } from './abox-item/abox-item.component';
 
@Component({
  selector: 'app-abox',
  templateUrl: './abox.component.html',
  styleUrls: ['./abox.component.less'],
})
export class AboxComponent implements OnInit {
  private container;
  activeIndex: number;
  @ViewChild('containers') containers: any;
  constructor(private rd2: Renderer2) {}
 
  ngOnInit(): void {}
 
  ngAfterViewInit(): void {
    this.container = this.containers.nativeElement;
    this.initCarouselWidth();
  }
    
  initCarouselWidth() {
    this.rd2.setStyle(this.container, 'width', '100px');
  }
}

// 在 app.module.ts 中引入 HttpClientModule 並注入
import {HttpClientModule} from '@angular/common/http';
imports: [
  BrowserModule,
  HttpClientModule
]

// 在用到的地方引入 HttpClient 並在建構函式宣告
import {HttpClient} from "@angular/common/http";
constructor(private http: HttpClient,private cd: ChangeDetectorRef) { } // 依賴注入

// get 請求資料
var api = "http://baidu.com/api/productlist";
this.http.get(api).subscribe(response => {
  console.log(response);
  this.cd.markForCheck()；
  // 如果改變了髒值檢測的變更原則 changeDetection: ChangeDetectionStrategy.OnPush
  // 則需要使用 this.cd.markForCheck() 手動提醒 Angular 這裡需要進行髒值檢測
});

// 在 app.module.ts 中引入 HttpClientModule 並注入
import {HttpClientModule} from '@angular/common/http';
imports: [
   BrowserModule,
   HttpClientModule
]

// 在用到的地方引入 HttpClient 、HttpHeaders 並在建構函式宣告 HttpClient
import {HttpClient,HttpHeaders} from "@angular/common/http";
constructor(private http:HttpClient) { } // 範例化

// post 提交資料
const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
var api = "http://127.0.0.1:4200/doLogin";
this.http.post(api,{username:'瑞萌萌',age:'22'},httpOptions).subscribe(response => {
		console.log(response);
});

// 在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 並注入
import {HttpClientModule,HttpClientJsonpModule} from'@angular/common/http';
imports: [
   BrowserModule,
   HttpClientModule,
   HttpClientJsonpModule
]

// 在用到的地方引入 HttpClient 並在建構函式宣告
import {HttpClient} from "@angular/common/http";
constructor(private http:HttpClient) { } // 範例化

// jsonp 請求資料
var api = "http://baidu.com/api/productlist";
this.http.jsonp(api,'callback').subscribe(response => {
   console.log(response);
});

// 使用命令 ng g interceptor name，在這裡建立攔截器 ng g interceptor LanJieQi
// cli 生成攔截器是沒有簡寫方式的

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class LanJieQiInterceptor implements HttpInterceptor {
  constructor() {}
  // 預設的 intercept() 方法只是單純的將請求轉發給下一個攔截器（如果有），並最終返回 HTTP 響應體的 Observable
  // request: HttpRequest<unknown> 表示請求物件，包含了請求相關的所有資訊,unknown指定請求體body的型別
  // next: HttpHandler 請求物件修改完成，將修改後的請求物件通過next中的handle方法傳回真正傳送請求的方法中
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> 	{
    // next 物件表示攔截器連結串列中的下一個攔截器（在應用中可以設定多個攔截器）
    return next.handle(request);
  }
}

// 在 @NgModule 模組中注入攔截器
// 攔截器也是一個由 Angular 依賴注入 (DI) 系統管理的服務，也必須先提供這個攔截器類，才能使用它
// 由於攔截器是 HttpClient 服務的依賴，所以必須在提供 HttpClient 的同一個（或其各級父注入器）注入器中提供這些攔截器
@NgModule({
  imports: [
    HttpClientModule
    // others...
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LanJieQiInterceptor,
      // multi: true 表明 HTTP_INTERCEPTORS 是一個多重提供者的令牌，表示這個令牌可以注入多個攔截器
      multi: true
    },
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

@Injectable()export class LanJieQiInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> 	{
    // 為了統一設定請求頭，需要修改請求
    // 但 HttpRequest 和 HttpResponse 範例的屬性卻是唯讀（readonly）的
    // 所以修改前需要先 clone 一份，修改這個克隆體後再把它傳給 next.handle()
    let req = request.clone({
    	setHeaders:{
      	token:"123456" // 在請求頭中增加 token：123456
    	}
			// setHeaders 和 headers: request.headers.set('token', '123456') 一致
  	})
  	return next.handle(req)// 將修改後的請求返回給應用
  }}

@Injectable()
export class LanJieQiInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> 	{
    // 為了統一設定請求頭，需要修改請求
    // 但 HttpRequest 和 HttpResponse 範例的屬性卻是唯讀（readonly）的
    // 所以修改前需要先 clone 一份，修改這個克隆體後再把它傳給 next.handle()
    let req = request.clone({
    	setHeaders:{
      	token:"123456" // 在請求頭中增加 token：123456
    	}
			// setHeaders 和 headers: request.headers.set('token', '123456') 一致
  	})
  	return next.handle(req)// 將修改後的請求返回給應用
  }
}

// 先在 NgModule 中匯入了 FormsModule 表單庫
// FormsModule 為我們提供了一些模板驅動的指令，例如：ngModel、NgForm
import { 
  FormsModule
} from '@angular/forms'; 

@NgModule({ 
  declarations: [ 
    FormsDemoApp, 
    DemoFormSku, 
    // ... our declarations here 
  ], 
  imports: [ 
    BrowserModule, 
    FormsModule,
  ], 
  bootstrap: [ FormsDemoApp ] 
}) 
class FormsDemoAppModule {}

 <div>
      <h2>基礎表單:商品名稱</h2>
      <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
        <div class="sku">
          <label for="skuInput">商品名稱:</label>
          <input
            type="text"
            id="skuInput"
            placeholder="商品名稱"
            name="sku" //使用form時必須定義，可以理解為當前控制元件的名字
            ngModel
          />
        </div>
        <button>提交</button>
      </form>
    </div>

 <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" >
 <!-- 
	這裡使用了 #f=「ngForm」，#v=thing 的意思是我們希望在當前檢視中建立一個區域性變數
	這裡為檢視中的 ngForm 建立了一個別名，並繫結到變數 #f
	這個 ngForm 是由 NgForm 指令匯出的
	ngForm 的型別的物件是 FormGroup 型別的
	這意味著可以在檢視中把變數 f 當作 FormGroup 使用，而這也正是我們在輸出事件 (ngSubmit) 中的使用方法
	在表單中繫結 ngSubmit 事件 (ngSubmit)=「onSubmit (f.value)「
	(ngSubmit) 來自 NgForm 指令
	onSubmit() 將會在元件類中進行定義
	f 就是 FormGroup ，而 .value 會以鍵值對的形式返回 FormGroup 中所有控制元件的值
	
	總結：當提交表單時，將會以該表單的值作為引數，呼叫元件範例上的 `onSubmit` 方法
-->

// 先在 NgModule 中匯入了 ReactiveFormsModule 表單庫
import { 
  ReactiveFormsModule 
} from '@angular/forms'; 
@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule
  ]
}) 

// 使用 formGroup 和 formControl 指令來構建這個元件，需要匯入相應的類
import { 
  FormBuilder, 
  FormGroup,
  ReactiveFormsModule
} from '@angular/forms'; 

// 在元件類上注入一個從 FormBuilder 類建立的物件範例，並把它賦值給 fb 變數（來自建構函式）
export class DemoFormSkuBuilder { 
  myForm: FormGroup;  // myForm 是 FormGroup 型別
  constructor(fb: FormBuilder) { 
    // FormBuilder 中的 group 方法用於建立一個新的 FormGroup
    // group 方法的引數是代表組內各個 FormControl 的鍵值對
    this.myForm = fb.group({  // 呼叫 fb.group () 來建立 FormGroup
      // 設定一個名為 sku 的控制元件，控制元件的預設值為 "123456"
      'sku': ['123456'] 
    }); 
  }
  onSubmit(value: string): void { 
    console.log('submit value:', value); 
  } 
}

<h2 class="ui header">Demo Form: Sku with Builder</h2>
<!--  
	當匯入 FormsModule 時，ngForm 就會自動建立它自己的 FormGroup
	但這裡不希望使用外部的 FormGroup，而是使用 FormBuilder 建立這個 myForm 範例變數
	Angular提供了 formGroup 指令，能讓我們使用現有的 FormGroup
	NgForm 不會應用到帶 formGroup 屬性的節點上
	這裡我們告訴Angular，想用 myForm 作為這個表單的 FormGroup
-->
<form [formGroup]="myForm" 
  <label for="skuInput"> SKU </label> 
  <input type="text" 
     id="skuInput" 
     placeholder="SKU" 
     [formControl]="myForm.controls['sku']">
<!--  
	將 FormControl 繫結到 input 標籤上 : 
	ngModel 會建立一個新的 FormControl 物件並附加到父 FormGroup 中
	但在例子中，我們已經用 FormBuilder 建立了自己的 FormControl
	要將現有的 FormControl 繫結到 input 上，可以用 formControl 指令
	將 input 標籤上的 formControl 指令指向 myForm.controls 上現有的 FormControl 控制元件 sku  
-->

const control = new FormControl('name', Validators.required);

// 在元件定義類中使用 FormBuilder
  constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
      'name': ['',Validators.required] 
    }); 
    this.name = this.myForm.controls['name']; 
  }

template:`<div>
      <h2>商品表單:商品名稱</h2>
      <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">
        <div>
          <label for="nameInput">商品名稱：</label>
          <input
            type="text"
            id="nameInput"
            placeholder="請輸入名稱"
            [formControl]="myForm.controls['name']"
          />
          <div style="color:red" *ngIf="!name.valid">
            名稱無效
          </div>
          <div style="color:red" *ngIf="name.hasError('textinvalid')">
            名稱不是以「123」開頭
          </div>
          <div *ngIf="name.dirty">
            資料已變動
          </div>
        </div>
        <div>
          <label for="codeInput">商品料號：</label>
          <input
            type="text"
            id="codeInput"
            placeholder="請輸入料號"
            [formControl]="myForm.controls['code']"
          />
          <div
            style="color:red"
            *ngIf="myForm.controls.code.hasError('required')"
          >
            該項必填
          </div>
          <div
            style="color:red"
            *ngIf="myForm.controls.code.hasError('pattern')"
          >
            只可輸入數位和英文
          </div>
        </div>
        <div style="color:green" *ngIf="myForm.isvalid">
          表單無效
        </div>
        <div style="color:green" *ngIf="myForm.valid">
          表單有效
        </div>
        <button type="submit">提交</button>
      </form>
    </div>`
export class NonInWarehouseComponent implements OnInit {
  myForm: FormGroup;
  name: AbstractControl;
  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      name: ['牛奶', Validators.compose([Validators.required, textValidator])],
      code: ['', [Validators.required, Validators.pattern('^[A-Za-z0-9]*$')]],
    });
    this.name = this.myForm.controls.name;
  }
  ngOnInit() {
    const nameControl = new FormControl('nate');
    console.log('nameControl', nameControl);
  }
  onSubmit(a: any) {
    console.log('a', a);
  }
}

// angular 原始碼中實現 Validators.required 
export class Validators {
  // 接收一個 AbstractControl 物件作為輸入
	static required(control: AbstractControl): ValidationErrors | null;
}
// 當驗證器失敗時，會返回一個 String Map<string,any> 物件，他的鍵是」 錯誤程式碼 「，它的值是 true
export declare type ValidationErrors = {
    [key: string]: any;
};

// 自定義驗證器
function textValidator(
  controls: FormControl // 因為FormControl繼承於 AbstractControl 所以也可以寫成FormControl物件
): {
  [s: string]: boolean;
} {
  if (!controls.value.match(/^123/)) {
    return { textinvalid: true };
  }
}

Validators.compose([Validators.required, textValidator])
// 不用compose   [Validators.required, textValidator]
// 保留 compose 是為了向以前歷史版本進行相容，不用 compose 也可實現

export class ReativeFormsComponent implements OnInit {
  ngOnInit() {
    this.addContact()
  }
  //動態表單
  personMess: FormGroup = new FormGroup({
    //生成動態表單陣列
    contacts: new FormArray([]) 
  })
  //獲取陣列物件
  get contacts(){
    return this.personMess.get('contacts') as FormArray
  }
  //增加一個表單組
  addContact(){
    let myContact = new FormGroup({
      name: new FormControl(),
      phone: new FormControl()
    })
    this.contacts.push(myContact)
  }
   //刪除一個表單組
  deleteContact(i:number){
    this.contacts.removeAt(i)
  }
  //提交表單
  OnSubmit() {
    console.log(this.personMess.value)
  }
}

<form [formGroup]="personMess" (submit)="OnSubmit()">
  <div formArrayName="contacts">
    <!-- 注意：這裡遍歷的時contacts.controls -->
    <div *ngFor="let contact of contacts.controls;let i =index" [formGroupName]="i">
      <input type="text" formControlName="name">
      <input type="text" formControlName="phone">
      <button (click)="deleteContact(i)">刪除資訊</button>
    </div>
  </div>
  <button (click)="addContact()">新增資訊</button><br>
  <input type="submit">
</form>