某工程師的開發日常

一般我們使用Angular處裡表單的問題，對於資料結構較為複雜的Model，我們都會採用Data Driven的方式，也就是使用Reactive Form，因為這樣對於資料結構複雜的Model來說是比較容易維護與掌控。 回到今天的主題，我們將介紹使用 Reactive Form動態產生表單欄位。因為我們平常工作可能多少會遇到需要動態產生表單欄位的需求。舉例來說，像是訂單的問題，它的資料結構可能像是這樣: {OrderID:"A001", Items:[ {ItemName:"橡皮擦",Price:15,Quantity:10}, {ItemName:"鉛筆",Price:10,Quantity:10}, {ItemName:"筆記本",Price:25,Quantity:25} ]} 如果我們新增一筆Item，就需要動態的產生Item的DOM。其實在Angular要完成動態產生表單欄位這樣的需求，不管資料結構有多複雜，大致只需要用到 FormGroup、 FormArray、FormControl、ngFor、 track by 就能搞定了 !! 這裡我們將用訂單的例子，來示範使用 Reactive Form來動態產生表單欄位 1. 首先，我們使用FormGroup、 FormArray與FormControl將表單建立起來。 2. 為了能夠動態產生Items，對於欄位Items我們使用FormArray。 3. 建立AddItem、CreateItem，用於新增欄位。 4. 使用ngFor來產生出Items的DOM。 5. 利用trackBy ，減少DOM 更新次數，提升效能。 import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, FormArray } from '@angular/forms'; @Component({ selector: 'app-reactive-form-sample', templateUrl: './reactive-form-sample

本次Angular 6 升級需要特別注意的事，在Angular 6將採用Rxjs 6，過去的Rxjs 5的語法將有些微的變動，但是沒關係只要乖乖依照官網上的步驟升級，就可以順利的無痛升級。 升級Angular 6的方式: 1. 更新Angular CLI (global and local)。    "npm update -g @angular/cli"    "npm update @angular/cli" 2. 執行"ng update --all" 更新所有相依性套件，此時既有的angular-cli.json轉為angular.json，點開angular.json會發現projects這個屬性，這意味著它可以讓多個Angular專案共用同一個 開發環境。 3. 雖然Angular 6 沒有破壞性更新，但Rxjs 6卻變動了不少，為了方便升級Rxjs 6，請全域安 裝"npm i -g rxjs-tslint"。 4. 執行rxjs-5-to-6-migrate -p src/tsconfig.app.json，會自動將專案內的Rxjs 5轉換成Rxjs 6的語法。 5. 如果專案內有相依的套件是Rxjs 6以前的版本的話，可以安裝rxjs-compat讓它向下相容。 "npm i rxjs-compat --save" 6. 如果專案想要轉成Progressive Web App (PWA) 架構，請執行"ng add @angular/pwa"，會自動加入 ngsw-config.json、manifest.json 與 service worker 設定。 參考文獻 1.  https://update.angular.io/