模板式表单校验和 表单处理实战

模板式表单校验

1. 在模板式表单中后台没有像响应式的数据模型，指令是唯一能使用的东西，需要将校验器方法包装成指令，然后在模板中使用
2. 在模板式表单中还可以使用angular默认已经定义的校验器required和minlength等，但是为了避免和HTML中的属性发生冲突可以使用novalidate来关闭浏览器默认的表单校验

  
手机号：

  注册

3. 使用ng命令生成一个指令

ng g directive directives/mobileValidator

4. 指令 就是一个没有模板的组件，组件作为标签来使用，指令可以作为HTML的属性来使用
5. 将之前写的校验方法包装到指令中去，在装饰器中写一个providers提供器，校验器的包装指令的token是固定的NG_VALIDATORS
6. 将校验手机号的方法包装成指令

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

@Directive({
  selector: '[mobile]',
  providers:[{provide:NG_VALIDATORS, useValue:mobileValidator ,multi:true}]
})
export class MobileValidatorDirective {

  constructor() { }

}

  
用户名：
  
手机号：

  
密码：
  
确认密码：

  注册

7. 模板式表单中由于组件里没有可以编程控制的数据模型，所以如果想要在了解表单中的任何信息，都要从模板式将信息传给组件控制器，在提交表单时，为了得知表单是否有效只能在onSubmit方法中传入

   注册

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

8. 与响应式表单相同使用hasError方法显示错误信息，但是由于模板式表单并没有formModel属性，所以使用myForm.form来调用hasError方法，

  
用户名：
  

    

      用户名是必填项
    
    

      用户最小长度为6
    
  
  
手机号：
  

    请输入正确的mobile
  

  
密码：
  

    密码最小长度为6
  
  
确认密码：

  

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

9. 通过状态属性来决定是否显示，但是不能这样myForm.form.get('username').valid||formModel.get('username').untouched直接获取状态属性值
10. 模板式表单和响应式表单不同，它的模型的值和状态的变更是异步的，而且很难控制，如果使用同步的方式去访问这些属性就会报错，如果在模板式表单中访问这些属性，使用input属性绑定

  
用户名：
  

    

      用户名是必填项
    
    

      用户最小长度为6
    
  
  

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

---

表单处理实战

1. 需要实现的功能
   处理商品搜索表单
   在商品名称中输入时，提示最少输入三个字
   在商品价格中输入负数时，提示商品价格不能为负数
   商品类别中展示所以的商品类别
   点击搜索时，如果表单中有字段不合法时，控制中不打印任何数据
2. 往productService添加一个新的方法来获取所有可用商品类别

getAllCategories():string[]{
  return ["电子产品","硬件设备","图书"];
}

3. 使用响应式表单完成效果

export class SearchComponent implements OnInit {


  formModel: FormGroup;

  categories: string[];

  constructor(private productService:ProductService) {
    let fb=new FormBuilder();
    this.formModel=fb.group({
      title:['',Validators.minLength(3)],
      price:[null,this.positiveNumberValidator],
      category:['-1']
    })

  }

  ngOnInit() {
    this.categories=this.productService.getAllCategories();
  }

  positiveNumberValidator(control: FormControl): any {
    let value = control.value;
    if (!value) {
      return null;
    }
    let price = parseInt(value);

    if (price > 0) {
      return null;
    } else {
      return { positiveNumber: true }
    }
  }

  onSubmit(): void {
    if (this.formModel.valid) {
      console.log(this.formModel.value)
    }
  }

}
 }

4. 建立一个表单的数据模型，将数据模型和模板HTML元素连接起来

  

    商品名称：
    
    请至少输入三个字符
  
  

    商品价格：
    
    请输入正数
  
  

    商品类别：
    
      --全部分类--
      {{category}}
    
  
  

    
      搜索
    
  

---