iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0

我的表單進化史

1.取得資料打包丟資料

最初看到表單,是使用 雙向綁定 的方式,取得和輸出資料,就可以將值打包成 json 傳給 伺服器

2.用事件去進行驗證

後續實作驗證,利用 blur 事件(說明:元素失去焦點觸發事件)傳送 $event.target.value 進行驗證,再利用 css 去顯示或隱藏 錯誤訊息
https://bear88130.github.io/validation/

3.Angular Template-driven forms 初見面

而後發現 Angulr 有專屬的表單應用,並不用自己造車,但真的要先理解 angular 表單該如何實作再開始,小弟途中誤打誤撞有實做出功能,但會發現有些可以動有些不能,就讓人滿頭問號,所以使用 Angular 表單,是有必要先看完說明,再行使用

4.再往 Reactive forms 前進

這禮拜六就會跟它多多親近了!

兩種表單

  • Reactive forms (中文:反應的表單)
  • Template-driven forms (中文:樣板驅動表單)

Reactive forms (中文:反應的表單) (或稱作 model-driven 模型驅動)
Reactive forms 提供 model-driven 的途徑去處理隨時間改變的表單值
https://angular.io/guide/reactive-forms#reactive-forms

Template-driven forms (中文:樣板驅動表單)
你可以建置表單,利用 Angaulr template 語法 中 形式特異 directives 和技術去撰寫。
https://angular.io/guide/forms#introduction-to-template-driven-forms

兩者都需要從 @angular/forms 匯入各自需要的 Module

Template-driven forms

src\app\app.module.ts
-----
import { FormsModule } from '@angular/forms';

@NgModule({
    imports: [
        FormsModule
    ],
})
export class AppModule { }

Reactive forms

src\app\app.module.ts
-----
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        ReactiveFormsModule
    ],
})
export class AppModule { }

兩者重要的差異

兩者重要的差異
https://angular.io/guide/forms-overview#key-differences

  REACTIVE TEMPLATE-DRIVEN
設置(form model) 很明確,在 component class 建置 不明確,directives 建置
Data model 結構化 非結構化
預測 同步 非同步
表單驗證 Functions Directives
突變性 不易變 易變化
可擴展性 低階 API 訪問 APIs 高階抽象化

目前的想法

Template-driven forms

  • 有後端驗證
  • 簡單使用
  • code 少
  • 先學它就對了

Reactive forms

  • 可以處理驗證
  • 應該還有其他優點~等我再明白後

上一篇
DAY14-Angular6之樣板參考變數-實作
下一篇
DAY16-Angular6之表單-Template-drive Forms
系列文
Angular初期筆記30

尚未有邦友留言

立即登入留言