第 14 天 我不是要压榨你我是给你个成长的机会｜Reactive Form

前情提要

我们整理专案後，现在专案有更明确的模组来封装元件，不仅让 App 效能提升，也让专案更「语意化」了，并且也越来越有架构的感觉了对吧？

不过来有很多 Angular 好玩常用的功能我们没有使用到。今天，我们相规划一个新的功能模组，并且先列出一个概要与对应的 Angular 功能。

让我们开始吧！

009

（欸欸欸，我又想到一个新的东西...）

呃，我以为做梦的是我...好吧，你又梦见了什麽？

（先别过什麽青铜五小强了，我这几天除了看纪录片外，也读了一点书。）

所以你梦见了什麽？

（我们可以来培训英雄啊！）

是没错啦，但是培训人是有成本的。

（不不不，我们要让他们自己付钱。）

呃，所以你是读到了什麽书啊？

（哼哼，我发现只要来盖一个地下城，一切就解决了！让人类来付钱挑战地下城！）

哦？我倒是没有想过你可以这样接回「主线」。

（所以现在立刻去抓四条龙，放在最後几层...）

你等会吧！我们应该先规划这个要有哪些功能吧！

地下城有些什麽呢？

地下城除了邂逅之外，每层都会有个楼主，只有打败楼主才能继续往下一层推进。

我们先设定守护地下城的都是怪物，很合理吧。所以我们会有一个新增怪物的功能，因为我们在新增英雄的时候，使用了去范本驱动表单（Template Driven Forms），所以这次让我们来玩玩响应式表单（Reactive Forms）。接着，我们要提供设定楼主的功能。

而怪物或提供一个列表，可供筛选检视，这部分会使用 Mat-Table来实作，但是...它预设提供的分页器（pagination）是长这个样子的：

这当然是好的设计，但可能我们已经很习惯点选一个页面方块来切换分页，例如 iT邦帮忙的分页器。当然除了「分页」功能之外，还有很多设计元件的细节，也许都会让我们应用到 Angular 更多样化的技术。比如，当你的分页气支援多国语，又会出现类似这样的文字「共 a 页，第 b 页」（page b of a），你该如何让画面依据语言来做不同的呈现？如果我撑得到那天，就来分页一下吧。

接着，要实作「在通过这一层之前，无法前往下一层」，每一层我们会由路由来控制，因此这里我们将使用路由守卫来把控使用者的访问，当使用者不具备挑战下一层的权限时，拒绝他的访问。

接着我们要制作简易的网页游戏来进行头目战，

地下城待办清单：

• 使用响应式表单来完成新增怪物功能。
• 自订元件：分页器。
• 设定楼主功能。
• 地下城楼层路由守卫。

目前列出来的清单，让我觉得或许应该再把「怪物」拉出来做成一个功能模组，而自订元件应该是一个专案等级的共用元件，这部分我们将新增一个 Shared Module 来宣告此类元件、指令、管道...。

这是我们计划中的专案结构：

src
⌞app
  ⌞ hero
  ⌞ monsger
  ⌞ stratum
  ⌞ shared
  shared.module.ts
      ⌞ models
      ⌞ pipes
      ⌞ directives
      ⌞ services
          hero.service.ts

简单说完接下来的规划，我们即将使用响应式表单（Reactive Form）制作新增怪物功能，先简单比较一些范本驱动表单和响应式表单吧。

范本驱动表单 v.s. 响应式表单

用个简易的表格来看：

除了这些以外，我自己认为，范本驱动表单不一定要与资料绑定，这件事我觉得挺有意思的。或许说不上什麽优点，但想想——在真的确定资料输入正确，并将其发送、传递到後端储存之前，这些经过检核、编辑的资料，其实并没有真的绑定资料。想想就觉得好玩，莫名有种买空卖空的趣味。

不过，让我先来看一段响应式表单的程序码范例，感受感受一下：

this.monsterForm = new FromGroup({
    'name': new FormControl(null, [Validators.required]),
    'hp': new FormControl(null, [Validators.required]),
    ...
})

也许我们还不真的了解上面这段程序码发生了什麽事（大致上应该可以猜出来），但可以很直觉得地发觉响应式表单会将表单的预设值、结构、检核方式设定在 ts 档案中。其他暂且不提，但在了解表单结构这件事上，我认为响应式表单是更方便的——更别说还提供了 FormBuilder 这麽好的类别，简化了设定响应式表单节的方式，例如：

constructor(private formBuildder: FormBuilder) {}

this.monsterForm = this.formBuilder.group({
    name: [null, [Validators.required]],
    hp: [null, [Validators.required]],
    ...
    )
});

并且，FormBuilder 搭配编辑器，可以更好地提供我们程序开发指引。如果选用响应式表单，建议就注入 FormBuilder 来使用。