框架学习：angualr的表单学习

表单状态变化：
touched表示失去焦点状态 untouched表示未接触时状态
pristine表示值未改变时true， dirty表示值改变
pending表示值正处于校验时

angular的表单有两种：
一、模板表单
需在主模块添加FormsModel模块
form标签内容在angular启动时会被自动渲染成NgForm属性
在form标签采用方法形式提交
例如：(ngSubmit)=“****（）”
提交的属性如果需要提交在标签中加ngModel 必须填name属性
得到相对应的值在Dom标签里加#再加自定义名称通过{{**.value}}得到
过程由指令构成
例如：

二、响应式表单
响应式表单需要初始化ReactiveFormsModule模块在表单中通过[formGroup]="formModel"调用，通过(submit)="myform()"进行提交
其采用的方法是在组件中调用formModel和formFroup组建成表单结构，并通过Validators的方法进行验证或者自定义验证方法验证
例如：
HTML——>

TS——>
formModel:FormGroup;
constructor(fb:FormBuilder) {
this.formModel=fb.group(
{username:[’’,[Validators.required,userValidator]],
photonumber:[’’,[photoValidator,Validators.required]],
equal:fb.group({
pass:[’’,[Validators.required]],
nopass:[’’]
},{validators:passwordValidator}
)}
);

公共验证组件——>
export function photoValidator(control:FormControl):any{
var b=/^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]){1})+\d{8}KaTeX parse error: Expected 'EOF', got '}' at position 109: …l:{photo:true} }̲ export functio…/;
let lidator=b.test(control.value);
console.log(‘用户校验：’+lidator);
return lidator?null:{user:true}
}
export function passwordValidator(group:FormGroup):any{
let a:FormControl=group.get(“pass”) as FormControl
let b:FormControl=group.get(“nopass”) as FormControl
let lidator:boolean=(a.value===b.value);
console.log(‘密码校验：’+lidator);
return lidator?null:{password:true}
}

总结：现阶段最常用响应式表单，在表单中的数据较多的时候，用响应式表单更加清晰明确，模板式表单适用于简单的数据提交通过指令快速搭建表单，模板表单在做校验时相对于响应式表单还是麻烦很多，尤其是自定义校验