formular翻译,angular 响应式表单
本篇文章带大家了解一下有角的中两种形式表单，简单介绍一下它们的用法，希望对大家有所帮助！
在有角的中，表单有两种类型，分别为模板驱动和模型驱动。【相关教程推荐： 《angular教程》 】
1. 模板驱动
1.1 概述
表单的控制逻辑写在组件模板中，适合简单的表单类型
1.2 快速上手
引入依赖模块表单模块
从" @angular/forms "导入{表单模块}
@NgModule({
导入：[表单模块]，
})
导出类应用模块{}将数字正射影像图表单转换为ngForm
form # f= ng form (submit)= on submit(f)/form声明表单字段为属性指令
form # f= ng form (submit)= on submit(f)
输入类型=text name=username ngModel /
按钮提交/按钮
/表单获取表单字段值
从" @angular/forms "导入{ NgForm }
导出类AppComponent {
onSubmit(form: NgForm) {
console.log(form.value)
}
}表单分组
form # f= ng form (submit)= on submit(f)
div ngModelGroup=user
输入类型=text name=username ngModel /
/div
div ngModelGroup=联系人
输入类型=text name=phone ngModel /
/div
按钮提交/按钮
/表格1.3 表单验证
需要必填字段最小长度字段最小长度maxlength字段最大长度模式验证正则例如：模式=\d 匹配一个数值form # f= ng form (submit)= on submit(f)
输入类型=text name=username ngModel所需模式=\d /
按钮提交/按钮
/表单导出类AppComponent {
onSubmit(form: NgForm) {
//查看表单整体是否验证通过
console.log(form.valid)
}
}!-表单整体未通过验证时禁用提交表单-
按钮类型=提交[禁用]=无效提交/按钮在组件模板中显示表单项未通过时的错误信息
form # f= ng form (submit)= on submit(f)
input #username=ngModel /
div *ngIf=username.touched！用户名。有效用户名。错误
div * ngIf=用户名。错误。必需请填写用户名/div
div * ngIf=用户名。错误。模式不符合正则规则/div
/div
/表单指定表单项未通过验证时的样式
input.ng-touched.ng-invalid {
边框：2px纯红；
}2. 模型驱动
2.1 概述
表单的控制逻辑写在组件类中，对验证逻辑拥有更多的控制权，适合复杂的表单的类型。
在模型驱动表单中，表单字段需要是表单控件类的实例，实例对象可以验证表单字段中的值，值是否被修改过等等
一组表单字段构成整个表单，整个表单需要是表单组类的实例，它可以对表单进行整体验证
表单控件：表单组中的一个表单项
表单组：表单组，表单至少是一个表单组
正式排列：用于复杂表单，可以动态添加表单项或表单组，在表单验证时，正式排列中有一项没通过，整体没通过
2.2 快速上手
引入反应型模块
从" @angular/forms "导入{反应型模块}
@NgModule({
导入：[反应型模块]
})
导出类应用模块{}在组件类中创建表单组表单控制对象
从" @angular/forms "导入{表单控件，表单组}
导出类AppComponent {
联系人表单：表单组=新表单组({
name: new FormControl()，
电话：新表单控件()
})
}关联组件模板中的表单
form[form group]=联系人表单(提交)= on submit()
输入类型= text 表单控件名称= name /
输入类型= text 表单控件名称= phone /
按钮提交/按钮
/表单获取表单值
导出类AppComponent {
onSubmit() {
控制台。日志(这个。联系方式。值)
}
}设置表单默认值
联系人表单：表单组=新表单组({
名称：新表单控件(默认值),
电话：新表格控制(15888888888)
})表单分组
联系人表单：表单组=新表单组({
全名：新表单组({
名字：新表单控件(),
姓氏：新的表单控件()
}),
电话：新表单控件()
})表单[表单组]=联系人表单(提交)= on submit()
div formGroupName=fullName
输入类型= text 表单控件名称= first name /
输入类型= text 表单控件名称=姓氏/
/div
输入类型= text 表单控件名称= phone /
按钮提交/按钮
/formonSubmit() {
控制台。日志(这个。联系方式。价值。姓名。用户名)
控制台。日志(这个。联系方式。get([ name ，用户名])?值)
}2.3 FormArray
需求：在页面中默认显示一组联系方式，通过点击按钮可以添加更多联系方式组
从" @角度/核心"导入{ Component，OnInit }
从" @angular/forms "导入{ FormArray，FormControl，FormGroup }
@组件({
选择器："应用程序根目录",
templateUrl:“”./app.component.html ，
样式：[]
})
导出类AppComponent实现OnInit {
//表单
联系人表单：表单组=新表单组({
联系人：新格式([])
})
获取联系人(){
将this.contactForm.get(联系人)作为形式阵列返回
}
//添加联系方式
addContact() {
//联系方式
const my contact:form group=new form group({
name: new FormControl()，
地址：新FormControl()，
电话：新表单控件()
})
//向联系方式数组中添加联系方式
this.contacts.push(myContact)
}
//删除联系方式
removeContact(i: number) {
this.contacts.removeAt(i)
}
ngOnInit() {
//添加默认的联系方式
this.addContact()
}
onSubmit() {
控制台。日志(这个。联系方式。值)
}
} form[form group]=联系人表单(submit)= on submit()
差异格式名称=联系人
差异
* ngFor= let联系人。控制的联系人；让i=指数
[formGroupName]=i
输入类型= text 表单控件名称= name /
输入类型= text 表单控件名称= address /
输入类型= text 表单控件名称= phone /
按钮（点击)=删除联系人一删除联系方式/按钮
/div
/div
按钮（点击)=addContact()添加联系方式/按钮
按钮提交/按钮
/表格2.4 内置表单验证器
使用内置验证器提供的验证规则验证表单字段
从" @angular/forms "导入{ FormControl，FormGroup，验证器}
联系人表单：表单组=新表单组({
名称：新表单控件(默认值, [
验证器。必需的，
Validators.minLength(2)
])
})获取整体表单是否验证通过
onSubmit() {
控制台。日志(这个。联系方式。有效)
}!-表单整体未验证通过时禁用表单按钮-
按钮[禁用]=contactForm.invalid 提交/按钮在组件模板中显示为验证通过时的错误信息
get name() {
返回this.contactForm.get(name )！
} form[form group]=联系人表单(submit)= on submit()
输入类型= text 表单控件名称= name /
div * ngIf= name。感动的名字。无效名称。错误
div *ngIf=name.errors.required 请填写姓名/div
div * ngIf= name。错误。最大长度
姓名长度不能大于
{ {姓名。错误。maxlength。所需长度} }实际填写长度为
{ {姓名。错误。maxlength。实际长度} }
/div
/div
/表格2.5 自定义同步表单验证器
自定义验证器的类型是以打字打的文件类
类中包含具体的验证方法，验证方法必须为静态方法
验证方法有一个参数控制，类型为抽象控制。其实就是表单控件类的实例对象的类型
如果验证成功，返回空
如果验证失败，返回对象，对象中的属性即为验证标识，值为没错，标识该项验证失败
验证方法的返回值为验证错误空
从" @angular/forms "导入{ AbstractControl，验证错误}
导出类名验证器{
//字段值中不能包含空格
静态cannotContainSpace(control:抽象控件):验证错误 null {
//验证未通过
if (/\s/).测试(控制值))返回{ cannotContainSpace: true }
//验证通过
返回空
}
}从导入{名称验证器} ./Name.validators
联系人表单：表单组=新表单组({
名称：新表单控件(,[
验证器。必需的，
名称验证器。cannotcontainspace
])
})div * ngIf= name。感动的名字。无效名称。错误
div * ngIf= name。错误。“不能包含空格”姓名中不能包含空格/div
/div2.6 自定义异步表单验证器
从" @angular/forms "导入{ AbstractControl，验证错误}
导出类名验证器{
静态应该是唯一的(控件：抽象控件):PromiseValidationErrors null {
返回新承诺(resolve={
if (control.value==admin) {
resolve({ shouldBeUnique: true })
}否则{
解析（空)
}
})
}
}联系人窗体：窗体组=新窗体组({
名称：新表单控件（
,
[
验证器。必需
],
名称验证器。应该唯一
)
})div * ngIf= name。感动的名字。无效名称。错误
div * ngIf= name。错误。应该是唯一的用户名重复/div
/div
div *ngIf=name.pending 正在检测姓名是否重复/div2.7 FormBuilder
创建表单的快捷方式。
this.fb.control:表单项
this.fb.group:表单组，表单至少是一个表单组
this.fb.array:用于复杂表单，可以动态添加表单项或表单组，在表单验证时，正式排列中有一项没通过，整体没通过
2.8 练习
获取一组复选框中选中的值
form[form group]= form (submit)= on submit()
label *ngFor=字母数据项
输入类型=复选框[值]=项。value (change)= onChange($ event)/
{{ item.name }}
/标签
按钮提交/按钮
/表单从" @角度/核心"导入{组件}
从" @angular/forms "导入{ FormArray，FormBuilder，FormGroup }
接口数据{
名称：字符串
值：字符串
}
@组件({
选择器："应用程序-复选框",
templateUrl:“”./checkbox.component.html ，
样式：[]
})
导出类复选框组件{
数据：ArrayData=[
{名称：梨，值：梨 },
{名称：李子，值：李子 },
{名称：猕猴桃，值：猕猴桃 },
{名称：苹果，值：苹果 },
{名称：石灰，值：石灰 }
]
表单：表单组
构造函数（私有fb:表单生成器){
this.form=this.fb.group({
checkArray: this.fb.array([])
})
}
onChange(事件：事件){
常数目标=事件。目标为HTMLInputElement
检查的常量=目标.已检查
常数值=目标值
const校验数组=this。形式。get(检查数组)as for array
如果（选中){
检查数组。推(这个。FB。控制(值))
}否则{
const index=校验数组。控制。查找索引(
control=control.value===value
)
checkArray.removeAt(index)
}
}
onSubmit() {
console.log(this.form.value)
}
}获取单选框中选中的值
导出类AppComponent {
表单：表单组
构造函数（公共fb:表单生成器){
这个。形式=这个。FB。群组({性别： })
}
onSubmit() {
console.log(this.form.value)
}
} form[form group]= form (submit)= on submit()
输入类型=单选值=男性表单控件名称=性别/男性
输入类型=单选值=女性formControlName=性别/女性
按钮类型=提交提交/按钮
/表格2.9 其他
补丁值：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响)
设置值：设置表单控件的值（设置全部，不能排除任何一个)
值更改：当表单控件的值发生变化时被触发的事件
重置：表单内容置空
更新值和有效性：对指定输入框取消校验
验证表单：表单组；
this.validateForm.get(cpwd ).updateValueAndValidity()；更多编程相关知识，请访问：编程视频！以上就是浅析有角的中两种类型的形式表单的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。