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,在提交方法里判断这个属性。

  
用户名:

  
手机号：

   

     
密码：
  
     
确认密码:
   
    
  

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

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

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

  
用户名:
  

    
用户名是必填项
    
用户名最新长度是6
  

  
手机号：
   

    
请输入正确的手机号
   

  

     
密码：
    
密码最小长度是6
     
确认密码:
    

      {{myForm.form.getError('equal', 'passwordsGroup')?.descxx}}
    
  
  

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