Angular :FormControl 和 FormGroup
FormControl和FormGroup是Angular中两个最基础的表单对象。
1. FormControl
FormControl代表单一的输入字段，它是Angular表单中的最小单元。
FormControl封装了这些字段的值和状态，比如是否有效、是否脏（被修改过）或是否有错
误等。
比如，下列代码演示了如何在TypeScript中使用FormControl：
// create a new FormControl with the value "Nate"
let nameControl = new FormControl("Nate");
let name = nameControl.value; // -> Nate
// now we can query this control for certain values:
nameControl.errors // -> StringMap of errors
nameControl.dirty // -> false
nameControl.valid // -> true
// etc.
为了构建表单，我们会创建几组FormControl对象，然后为它们附加元数据和逻辑。
在Angular中，我们经常将一个类（本例中为FormControl）以属性形式（本例中为formControl）附加在DOM上。比如下面这个表单：
<input type="text" [formControl]="name" />
这会在此form的上下文中创建一个新的FormControl对象。
2. FormGroup
大多数表单都拥有不止一个字段，因此我们需要某种方式来管理多个FormControl。假设我们要检查表单的有效性。如果要遍历这个FormControl数组并检查每一个FormControl是否有效，必然相当繁琐；而FormGroup则可以为一组FormControl提供总包接口（wrapper interface），来解决这种问题。
下面是FormGroup的创建方式：
let personInfo = new FormGroup({
firstName: new FormControl("Nate"),
lastName: new FormControl("Murray"),
zip: new FormControl("90210")
})
FormGroup 和 FormControl 都继承自同一个祖先AbstractControl。这意味检查 personInfo 的状态或值就像检查单个FormControl那么容易：
// firstName: "Nate",
// lastName: "Murray",
// zip: "90210"
// }
// now we can query this control group for certain values, which have sensible
// values depending on the children FormControl's values:
personInfo.errors // -> StringMap of errors
personInfo.dirty // -> false
personInfo.valid // -> true
// etc.
注意，当我们试图从FormGroup中获取value时，会收到一个“键值对”结构的对象。它能让我们从表单中一次性获取全部的值而无需逐一遍历FormControl，使用起来相当顺手。
3. 创建表单
我们要构建一个表单，效果如图：
3.1 加载 FormsModule
为了使用这个新的表单库，先要确保我们的NgModule中导入了这个表单库。
Angular中有两种使用表单的方式，我们在本章中都会展开讨论：使用FormsModule以及使用ReactiveFormsModule。既然都要用到，那么这个模块就同时导入它们。因此需要在引用启动程序app.ts中这样写：
import {
FormsModule,
ReactiveFormsModule
} from '@angular/forms';
// farther down...
@NgModule({
declarations: [
FormsDemoApp,
DemoFormSku,
// ... our declarations here
],
imports: [
BrowserModule,
FormsModule, // <-- add this
ReactiveFormsModule // <-- and this
],
bootstrap: [ FormsDemoApp ]
})
class FormsDemoAppModule {}
这确保了我们能在视图中使用Angular表单指令。
FormsModule为我们提供了一些模板驱动的指令，例如：
- ngModel
- NgForm
ReactiveFormsModule则提供了下列指令： - formControl
- ngFormGroup
3.2 简易SKU 表单：template
template: `
Demo Form: Sku
`
3.2.1. form和NgForm
我们导入了FormsModule，因此可以在视图中使用NgForm了。记住，当这些指令在视图中可用时，它就会被附加到任何能匹配其selector的节点上。
NgForm做了一件便利但隐晦的工作：它的选择器包含form 标签（而不用显式添加ngForm属性）。这意味着当我们导入FormsModule时候，NgForm就会被自动附加到视图中所有的