今天完成的事情：

关于表单验证

首先需要操作表单的模块引入这两个模块； 

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

模板驱动表单依赖FormsModule,数据驱动的表单依赖FormsModule,ReactiveFormsModule 

模板驱动：主要是依赖[(ngModel)]和#scope_var以及原生表单控件属性(require,minlenght,maxlength等)来操作表单的那的值亦或者校验

<!--#UserName 是局部变量，若是有ngmodel,拿到的就是一个响应对象，若是非ngmodel绑定的，则是dom元素代码-->
<!--testform这个局部变量保存了表单的所有相关信息-->
<!--ngSubmit是用来触发表单提交的-->
<!--ngModel相应变量的值-->
<!--$event是原生dom对象-->
<form  #testform="ngForm"  (ngSubmit)="Submit(testform.value,testform.valid)">
    <label for="username">Name</label>
    <input type="text" id="username" #UserName="username" class="form-control"
           required minlength="4" maxlength="24"
           name="username" [(ngModel)]="username" [ngModelChange]="validate($event)">
    <div *ngIf="UserName.valid || (UserName.pristine && !testform.submitted)">
        您输入的值有误，请重新输入
    </div>
    <button type="submit" >提交</button>
</form>

有两种方式处理来对上面的表单做校验；

1.在Submit()函数内，在点击提交的时候对整个表单一一去判断，传统方式基本这样

2.每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值

数据驱动：

FormGroup: 用来追踪表单控件有效状态及值 =》 可以理解为获取且可以操作整个表单的数据 

FormBuilder:表单数据构建工具[构建初始表单

简化构建代码(包括了new FormGroup(),new FormControl(),new FormArray()),FormGroup()内置多种校验方式 

formControlName: 同步与FormGroup构建表单内相同字段的值！

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, Validators, FormBuilder } from '@angular/forms'; // 引入表单的一些特性
import { Router } from '@angular/router';
import { AccountService } from '../../services/account.service';
import { environment } from '../../../../../environments/environment';
import { flyIn } from '../../../../animation/flyIn';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
animations: [flyIn]
})
export class LoginComponent implements OnInit, OnDestroy {
public form: FormGroup; // 表单对象
public showLoading = false;
public messageTips: string;
public login_subscribe: any;


// Validators的写法注意事项
// v2.x版本这样的写法是可行的，v4有调整，不然不会生效
// 'UserName':'', [ Validators.compose([Validators.minLength(6)]

// v4+ , 第一位的''代表这个元素初始化构建为空值,类似未输入状态
// 'UserName': ['', Validators.compose([Validators.minLength(6)]

// Validators可选参数
// 1. required ：必须验证的，返回布尔值
// 2. minLength ： 最小长度
// 3. maxLenght: 最大长度
// 4. nullValidator : 空值判断
// 5. coompose :多重判断组合，下面有写法
// 6. pattern是支持正则模式，正则谨记转义转义转义
constructor(private fb: FormBuilder, private router: Router, private account: AccountService) {
this.form = fb.group({
'UserName': ['', Validators.compose([Validators.minLength(6) || Validators.pattern('(0|86|17951)?(-)?1[3,4,5,7,8,9]\\d{9}') || Validators.pattern('[\\.a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+')])],
'PassWord': ['', Validators.compose([Validators.required, Validators.pattern('\\w{8,16}')])],
'rememberAccount': ['']
});
}
ngOnInit() {
}
// 登录事件
onSubmit(e) {
this.showLoading = true;
this.login_subscribe = this.account.login(e.value).subscribe((res) => {
console.log('省略。。。。。。')
}, (err) => {
this.showLoading = false;
});
}
ngOnDestroy() {
if (this.login_subscribe) {
this.login_subscribe.unsubscribe();
}
}
}

明天计划的事情：

       继续学习angular

问题：

       http传输

收获：

      如上