angular中两种表单的区别(响应式和模板驱动表单)

2023-09-04 19:53:04 305

angular的表单

angular的表单分为两种，一种是响应式的表单，另一种是模板驱动表单。使用'@angular/forms'库中的FormGroup,FormControl，FormArray,FormBuilder等类构建出的数据对象就是响应式的表单,在响应式的表单中，我们会在数据源里面进行各种操作，像添加校验等，在html文件中使用formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)。

//ts
profileForm=newFormGroup({
firstName:newFormControl(''),
lastName:newFormControl(''),
address:newFormGroup({
street:newFormControl(""),
city:newFormControl(""),
state:newFormControl(""),
zip:newFormControl("")
})
})
//html

模板驱动的表单是我们实例化好一个类的数据之后，在html中使用NgForm指令后将数据和表单进行绑定,使用[(ngModel)]来将表单的数据和和视图进行双向绑定，NgForm指令为form增补了一些额外特性。它会控制那些带有ngModel指令和name属性的元素，监听他们的属性。

//html


Name



HeroPower

{{power}}




NewHero


Submit


//ts
model=newHero(18,'DrIQ',this.powers[0],'ChuckOverstreet');

响应式表单

响应式的表单中，添加校验逻辑是以返回一个ValidatorFn类的函数实现的

functionforbiddenNameValidator(value:string):ValidatorFn{
return(control:AbstractControl):{[key:string]:any}|null=>{
construle=newRegExp(value,'i');//设定验证规则,i是忽略大小写的意思
constresult=rule.test(control.value);//control.value是输入框的值,forbidden是正则结果
returnresult?{'forbiddenName':{value:control.value}}:null;//如果匹配成功,则返回对象
};
}

firstName:['',[forbiddenNameValidator('bob')]],

模板驱动表单

模板驱动的表单中，添加校验逻辑是以指令方式实现的

//ts
import{Directive,Input}from'@angular/core';
import{AbstractControl,NG_VALIDATORS,Validator,ValidatorFn,ValidationErrors}from'@angular/forms';
import{FormGroup}from'@angular/forms';
exportfunctionforbiddenNameValidator(nameRe:RegExp):ValidatorFn{
return(control:AbstractControl):{[key:string]:any}|null=>{
constforbidden=nameRe.test(control.value);
returnforbidden?{'forbiddenName':{value:control.value}}:null;
};
}

@Directive({
selector:'[appForbiddenName]',
providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenValidatorDirective,multi:true}]
})
exportclassForbiddenValidatorDirectiveimplementsValidator{
@Input('appForbiddenName')forbiddenName:string;

validate(control:AbstractControl):{[key:string]:any}|null{
returnthis.forbiddenName?forbiddenNameValidator(newRegExp(this.forbiddenName,'i'))(control)
:null;
}
}
//html

总结

响应式表单需要引入ReactiveFormsModule模块，在使用时需要引入大量的指令，使用麻烦，但是添加校验逻辑简单，用户可以动态添加新的输入域，适合非固定的表单。

模板驱动的表单中，表单的数据生成很简单，在html中需要双向绑定，并且配上name属性，添加校验时要是用指令的方式，适合固定的输入表单。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

angular中两种表单的区别(响应式和模板驱动表单)

热门推荐

随机推荐