angular4.0的模板式表单、响应式表单及其错误提示

两种表单写法，看了一遍之后最近做东西还是傻傻分不清，各种问题，所以滚去又看了一遍并做了记录~~~
共勉^_^

模板式表单

NgForm、NgModel、NgModelGroup是FormModule里的内容，NgForm会自动拦截标准的表单处理事件（eg.提交），angular用ngSubmit代替标准的表单提交NgForm隐式的创建一个FormGroup类的实例，代表表单的数据模型，用来存储表单数据，标有这个指令的表单会自动发现标有NgModel指令的表单子元素，并将它们的值添加到数据模型中

<div ngForm>
...
</div>
等同于
<form>
...
</form>

如果不想让angular管理你的表单，需要在表单标签里添加ngNoForm，此时浏览器默认行为生效（eg. action、post）

<form ngNoForm>
...
</form>

模板本地变量（#开头 eg.#myForm）
表单被模板本地变量引用，以便在模板中访问NgForm的实例

<form #myForm = "ngForm" (ngSubmit) = "onSubmit(myForm.value)">
...已经拿到NgForm创建的对象了
    <input type="text" ngModel>
    <input type="text" ngModel>
    <input type="text" ngModel>
</form>
<div>
使用：{
  {myForm.value | json}}
value保存着所有表单字段(仅限标有ngModel的字段)里的当前值
</div>

onSubmit(value: any) {
console.log(value);
}

ngModel会隐式的创建一个FormControl，代表字段的数据模型，在ngForm的表单里这个指令不需要用括号[()]括起来, 但需要为添加这个指令的字段添加一个name属性

    <form #myForm = "ngForm" (ngSubmit) = "onSubmit(myForm.value)">
        ...通过onSubmit函数传参，已经拿到NgForm创建的对象了
        <input type="text" ngModel name="username">
        <input type="password" ngModel name="password">
        <input type="password" ngModel name="repassword">
</form>

name属性会成为前面所说value对象的一个属性名
标有ngModel的字段也可以用模板本地变量引用，从而获取它的值

<input type="text" ngModel name="username" #username = "ngModel">
<p>
    {
   {
   username.value}}
</p>

NgModelGroup,是表单的一部分，允许将一部分表单字段组织在一起（比如密码和确认密码的input），形成更清晰的层次关系，隐式创建一个FormGroup类的实例，。。看代码更直接。。。（它的value值会在NgForm表单的那个value表现为一个嵌套的对象，所有NgModelGroup的 子属性是嵌套对象的子属性）

响应式表单

FormControl保存着当前元素的值以及校验状态，是否被修FormGroup

username：FormControl = new FormControl("aaa")
参数表示当前元素初始值

FormGroup是多个FormControl的集合，若其中一个FormControl无效则整个FormGroup无效

username：FormControl = new FormControl("aaa");
formGroup: FormGroup = new FormGroup({
    form: new FormControl(),
    to: new FormControl()
})

FormArray与FormGroup类似，但是它有一个额外的长度属性，FormGroup代表表单的固定子集，而FormArray代表一个可以增长的集合，比如让用户输入多个Email地址
FormArray中的FormControl是没有相关的key，只能通过序号（0 1 2 3…）访问

emails: FormArray = new FormArray([
    new FormControl("a@a.com"),
    new FormControl("b@a.com")
]);

相关指令，都来自reactiveFormsModule模块
第二列是属性绑定，FormArray不能通过属性绑定来写,第三列不需要用属性绑定语法

响应式表单指令都是form开头的，，，，响应式表单可以直接访问数据模型的类，只能在代码中操作，模板式表单是只能在模板中操作
html

<!-- 注意括号的问题，[formGroup]的值是后台的一个属性，而formGroupName是字符串-->
<form [formGroup] = "formModel" (submit) = "onSubmit">
    <input type="text" formControlName = "username">
    <div formGroupName = "dateRange"