8.模板式表单校验

模板式表单只能将校验方法包装成指令。
步骤1：

ng g directive  directives/mobileValidator
ng g directive  directives/equalValidator

步骤2：

指令没有模板，在selector里写名字，模板引用。提供了一些校验器，有对应的指令，写到模板上，为了 区分指令和属性，所以要写noValidator.不要启动游览器默认的表单校验。

@Directive({
  selector: '[appMobileValidator]',
  providers: [{provide: NG_VALIDATORS, useValue: mobileValidator, multi: true}]
  /*校验器的token的NG_VALIDATORS,写死;校验方法的名字，multi等于true*/
})
export class MobileValidatorDirective {

  constructor() { }

}

import { Directive } from '@angular/core';
import {NG_VALIDATORS} from '@angular/forms';
import {equalValidator, mobileValidator} from '../validator/Validators';

@Directive({
  selector: '[appEqualValidator]',
  providers: [{provide: NG_VALIDATORS, useValue: equalValidator, multi: true}]
  /*multi:一个token挂多个值*/
})
export class EqualValidatorDirective {

  constructor() { }

}

步骤3：
指令为模板表单加上了校验，模板式表单没有数据模型，想着代码里了解信息，需要从模板传入控制器。提交表单，想知道表单是否有效，提交方法里传入myForm.Valid,在提交方法里判断这个属性。

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value,myForm.valid)" noValidator>
  <div>用户名:<input  ngModel  required minlength="6" type="text" name="username" (input)="onMobileInput(myForm)" /></div>

  <div>手机号：<input ngModel appMobileValidator type="text" name="mobile"/></div>

   <div ngModelGroup="passwordGroup" appEqualValidator>
     <div>密码：<input ngModel type="password" minlength="6" name="password"/></div>
  
     <div>确认密码:<input ngModel type="password" name="confirmpass"/></div>
   
    </div>
  </div>
  <div><input type="submit" value="提交"/></div>
</form>

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

通过指令，校验逻辑加上完成。
步骤4：
控制错误信息是否显示，要用 hasError，得用myForm.form.hasError.

用状态属性控制它是否显示
在模板表单，不能用状态属性
模板表单和响应式不同。模型的值和状态的变更时异步的，用同步的方式访问这些属性就会报错。

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value,myForm.valid)" novalidator>
  <div>用户名:<input  ngModel  required minlength="6" type="text" name="username" (input)="onMobileInput(myForm)" /></div>
  <div [hidden]="mobileValid || mobileUntouched"><!--控制整体的错误信息是显示还是不显示，用户信息通过或者用户名输入框获取焦-->
    <div [hidden]="!myForm.form.hasError('required','username')">用户名是必填项</div>
    <div [hidden]="!myForm.form.hasError('minlength','username')">用户名最新长度是6</div>
  </div>

  <div>手机号：<input ngModel appMobileValidator type="text" name="mobile"/></div>
   <div [hidden]="myForm.form.get('mobile').valid || myForm.form.get('mobile').pristine">
    <div [hidden]="!myForm.form.hasError('mobile','mobile')">请输入正确的手机号</div>
   </div>

  <div ngModelGroup="passwordGroup" appEqualValidator>
     <div>密码：<input ngModel type="password" minlength="6" name="password"/></div>
    <div [hidden] = "!myForm.form.hasError('minlength', ['passwordsGroup', 'password'])">密码最小长度是6</div>
     <div>确认密码:<input ngModel type="password" name="confirmpass"/></div>
    <div [hidden] = "!myForm.form.hasError('equal', 'passwordsGroup')">
      {{myForm.form.getError('equal', 'passwordsGroup')?.descxx}}
    </div>
  </div>
  <div><input type="submit" value="提交"/></div>
</form>
<!--
<div>{{myForm.value | json}}</div> &lt;!&ndash;获取整个表单的数据&ndash;&gt;
<div>{{username.value}}</div> &lt;!&ndash;通过这个获取用户名的值&ndash;&gt;
-->

mobileValid = true;
  mobileUntouched = true;
  onMobileInput(form: NgForm) {
    if (form) {
      this.mobileValid = form.form.get('mobile').valid;
      this.mobileUntouched = form.form.get('mobile').untouched;
    }
  }