今天完成的事情

一边看表单验证的资料，一边更改自己的模板，使用的ng2的表单验证模块，改变了之前的数据传输方式，最后，一件事情都没有完成。想的太简单了，表单验证远比想象中的复杂多了。

明天计划的事情

虽然表单验证的知识点基本上都看完了，比较多，离掌握还差很远，明天尽量把表单验证做完。

遇到的问题

表单验证之前也没有怎么做过，只是用了标签自带的属性进行验证，ng2也自带了部分指令，但是想要实现稍微复杂一点的验证就需要做自定义规则，这也是今天看的比较懵的一点，因为不知道ng2都自带了那些属性。还是不熟悉。
组件里面不该写逻辑，但是还是写了一串，现在还是先把功能实现了，再把相应的功能分配到服务或者其他组件去，这样就会降低因为大量新知识没有掌握的情况下犯错误的几率，同时分解的任务的可执行性，不至于手忙脚乱无从下手。

收获

Angular2 表单有两种：模板式表单和响应式表单
两种表单验证的方式各有优劣，模板式表单适合简单的验证，自定义验证规则麻烦；响应式表单验证代码相对较多，但是自定义验证规则比较方便。

<form  [formGroup]="loginForm" (submit)="onSubmit()">
    <label class="glyphicon glyphicon-user icon-text" for="name">
      <input type="text" name="loginName" id="name" class="input" placeholder="请输入用户名"
             formControlName="loginName"/>
    </label>
    <div class=‘error-msg’>
      <i [hidden]="!loginForm.hasError('required', 'loginName')">用户名不能为空</i>
      <i [hidden]="!loginForm.hasError('minLength', 'loginName')">用户名最少4位</i>
      <i [hidden]="!loginForm.hasError('maxLength', 'loginName')">用户名最多12位</i>
    </div>
    <label class="glyphicon glyphicon-log-in icon-text" for="pwd">
      <input type="password" name="loginPassword" id="pwd" class="input" placeholder="请输入密码"
             formControlName="loginPassword"/>
    </label>
    <p class="tips">{{logMsg}}</p>
    <button type="submit" class="btn">登 录</button>
  </form>

在上面响应式表单中，formGroup会接管这个表单中的所有属性。formControlName是FromControl的一个属性，接管所在表单的属性。默认属性有，valid， value等，required minlength是ng2的默认验证方式。当整个表单当中所有的验证都通过(true)表单的loginForm.valid属性值才为真。