今天完成的事情：

了解表单验证
明天计划的事情：

理解表单验证经里面的模块应用
遇到的问题：

表单模块验证不太会用，而且判断语句不怎么熟练
收获：

首先 input HTML 有自带的验证属性

HTML自带表单验证有

予以输入类型

如type="text"输入类型为文档等后面还有很多如 URL类型或者EMAIL类型等等

Angular 表单验证需要引入2个模块

import { FormsModule,ReactiveFormsModule } from '@angular/forms';

第一个是双向绑定

ReactiveFormsModule ：

导出响应式表单所需的基础设施和指令，使其能用于任何导入了本模块的 NgModule 中。

然后进行个简单的赋值

 Form:FormGroup;

跟踪一组 FormControl 实例的值和有效性状态。

FormGroup 把每个子 FormControl 的值聚合进一个对象，它的 key 是每个控件的名字。 它通过归集其子控件的状态值来计算出自己的状态。 比如，如果组中的任何一个控件是无效的，那么整个组就是无效的。

FormGroup 是 Angular 中用来定义表单的三大基本构造块之一，就像 FormControl、FormArray 一样。

当实例化 FormGroup 时，在第一个参数中传入一组子控件。每个子控件会用控件名把自己注册进去。

他创建里面的值会在判断用到比如

 <div class="contain-wrapper"  [formGroup]="Form">

            <label for="name">账户名：</label>

            <input type="text" id="name" formControlName="name"><br/>

            <div *ngIf="name.invalid && (name.dirty || name.touched)" >

                <div *ngIf="name.errors.required">

                    请输入长度账户名！

                </div>

                <div *ngIf="name.errors.minlength">

                    账户名长度不小于4！

                </div>

            </div>

            <label for="email">邮箱：</label>

            <input type="text" id="email" formControlName="email"><br/>

            <div *ngIf="email.invalid && (email.dirty || email.touched)" >

                <div *ngIf="email.errors.required">

                    请输入邮箱！

                </div>

            </div>

            <label for="tel">电话:</label>

            <input type="text" id="tel" formControlName="tel">

            <div *ngIf="tel.invalid && (tel.dirty || tel.touched)" >

                <div *ngIf="tel.errors.required">

                    请输入电话！

                </div>

            </div>

        </div>

比如这里面的判断都是应用formGroup里面的值打印出来都是对象，现在还没摸清楚明天看下这个文档里面的哪些值都是干嘛的