angular 表单,angular表达式
本文带你继续学习angular，了解angular中的响应式表单，介绍响应式表单模块全局注册和添加基本表单控件的知识。希望对你有帮助！
响应式表单
Angular提供了两种不同的方法来通过表单处理用户输入：响应表单和模板驱动表单。【相关教程推荐：《angular教程》】
响应式表单：提供对底层表单对象模型的直接和显式访问。它们比模板驱动的表单更健壮。如果表单是应用程序的关键部分，或者您已经在使用响应式表单构建应用程序，那么就使用响应式表单。模板驱动的表单：依靠模板中的指令来创建和操作底层对象模型。它们对于向应用程序添加简单的表单非常有用，比如电子邮件列表注册表单。
全局注册响应式表单模块 ReactiveFormsModule
要使用响应式表单控件，请从@angular/forms包中导入ReactiveFormsModule，并将其添加到NgModule的imports数组中。如下：app.module.ts
/* * * * * * app . module . ts * * * * */
从“@angular/forms”导入{ ReactiveFormsModule }；
@NgModule({
进口：[
//其他导入.
反应型模块
],
})
使用表单控件有三个步骤。
在应用程序中注册响应式表单模块。该模块声明了一些您希望在响应表单中使用的指令。
生成一个新的FormControl实例并将其保存在组件中。
在模板中注册此FormControl。
若要注册FormControl，需要导入FormControl类，创建formcontrol的新实例，并将其保存为该类的属性。如下所示
/* * * * * *测试组件*****/
从“@angular/core”导入{ Component }；
从“@angular/forms”导入{ form control }；
@组件({
选择器：“应用程序名称编辑器”，
templateUrl:“”。/name-editor.component.html ，
样式URL:[。/name-editor.component.css]
})
导出类TestComponent {
//可以在FormControl的构造函数中设置初始值，本例中为空字符串
name=new form control(“”)；
}然后在模板中注册控件，如下所示：test.component.html
！test.component.html
标签
名称：输入类型=text [formControl]=name
/标签
！-如果输入中输入的值改变，此处显示的值也将改变-
PNAME:{ { name . value } }/P
添加基础表单控件 FormControl
就像FormControl的实例可以让你控制单个输入框对应的控件一样，FormGroup的实例也可以跟踪一组FormControl实例(比如一个表单)的表单状态。创建FormGroup时，将根据其名称跟踪其中的每个控件。
请参见以下示例：test.component.ts，test.component.ts。
从“@angular/core”导入{ Component }；
从“@angular/forms”导入{ FormControl，FormGroup，Validators }
@组件({
选择器：“应用程序测试”，
templateUrl:“”。/test.component.html ，
样式URL:[。/test.component.css]
})
导出类TestComponent实现OnInit {
构造函数(){}
profileForm=新表单组({
firstName: new FormControl(，[Validators.required，validators . pattern([a-zA-Z0-9]* ))，
lastName:新的FormControl( ，Validators.required)，
});
onSubmit() {
//查看控件组的每个字段的值
console . log(this . profile form . value)
}
}!- profileform这个FormGroup通过FormGroup指令绑定到form元素，在模型和form中的输入框之间创建一个通信层-
！- FormGroup指令还将侦听form元素发出的submit事件，并发出一个ngSubmit事件，以便可以绑定一个回调函数。-
form[form group]= profile form (ngSubmit)= on submit()
标签
！-每个输入框通过FormControlName指令绑定到FormGroup中定义的FormControl。这些表单控件将与相应的元素进行通信-
名字：输入type= text form control Name= first Name
/标签
标签
姓氏：输入类型= text form control Name= last Name
/标签
按钮类型=提交[禁用]=!profileForm.valid "提交/按钮
/表单
p{{ profileForm.value }}/p
！-控件组的状态：无效或有效-
p{{ profileForm.status }}/p
！-控件组输入的值是否为有效值：正确或错误-
p{{ profileForm.valid }}/p
！-是否禁用：正确或错误-
p { {个人资料表单。已禁用} }/p
把表单控件分组 FormGroup
在响应式表单中，当需要与多个表单打交道时，手动创建多个表单控件实例会非常繁琐表单生成器服务提供了一些便捷方法来生成表单控件表单生成器在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。
表单生成器是一个可注入的服务提供者，它是由反应式模块提供的。只要把它添加到组件的构造函数中就可以注入这个依赖。
看下例演示：测试。组件。分时（同timesharing）
从" @角度/核心"导入{组件}；
//1、导入表单生成器
从" @angular/forms "导入{ FormBuilder，验证器}。
@组件({
选择器："应用程序测试",
templateUrl:“”./test.component.html ，
样式URL:[ ./test.component.css]
})
导出类测试组件{
//2、注入表单生成器服务
构造函数（私有fb: FormBuilder) { }
ngOnInit() { }
profileForm=this.fb.group({
名字：[ ,[验证器。必选，验证器。模式([a-zA-Z0-9]* )，
姓氏：[ ，Validators.required]，
});
//相当于
//profileForm=new FormGroup({
//firstName: new FormControl(，[Validators.required，Validators。模式([阿扎-Z0-9]* )，
//lastName: new FormControl( ，Validators.required)，
//});
onSubmit() {
控制台。日志(这个。轮廓形式。值)
console.log(this.profileForm)
}
}对比可以发现，使用表单生成器服务可以更方便地生成表单控件、表单组和形式上，而不必每次都手动新的一个新的实例出来。
使用更简单的 FormBuilder 服务生成控件实例
验证器（验证器)函数可以是同步函数，也可以是异步函数。
同步验证器：这些同步函数接受一个控件实例，然后返回一组验证错误或零。你可以在实例化一个表单控件时把它作为构造函数的第二个参数传进去。异步验证器：这些异步函数接受一个控件实例并返回一个承诺或可观察的，它稍后会发出一组验证错误或零。在实例化表单控件时，可以把它们作为第三个参数传入
表单验证器 Validators
类验证器{
static min(min:number):验证器fn//允许输入的最小数值
静态最大值(max: number): ValidatorFn//最大数值
需要静态(控件：抽象控件):验证错误 null//是否必填
static必需true(控件：抽象控件):验证错误空
静态电子邮件(控件：抽象控件):验证错误 null//是否为邮箱格式
静态minLength(minLength:number):验证器fn//最小长度
静态maxLength(maxLength:number):验证器fn//最大长度
静态模式(pattern:string RegExp):验证器fn//正则匹配
静态null验证程序(控件：抽象控件):验证错误 null//什么也不做
静态合成(validator fn[]):validator fn null
静态作曲异步(验证器：异步验证器fn[]):异步验证器fn null
}
验证器Validators类的API
要使用内置验证器，可以在实例化表单控件控件的时候添加
从" @angular/forms "导入{验证器}；
.
ngOnInit(): void {
this.heroForm=new FormGroup({
//实例化表单控件控件
名称：新表单控件(this.hero.name，[
验证器。必选，//验证，必填
Validators.minLength(4)，//长度不小于四
禁止的名称验证程序(/bob/I)//自定义验证器
]),
alterEgo:新的FormControl(this.hero.alterEgo)，
功率：新的FormControl(this.hero.power，Validators.required)
});
}
get name(){ return this。英雄形态。get( name )；}
get power(){返回此。英雄本色。get( power )；}
内置验证器函数
有时候内置的验证器并不能很好的满足需求，比如，我们需要对一个表单进行验证，要求输入的值只能为某一个数组中的值，而这个数组中的值是随程序运行实时改变的，这个时候内置的验证器就无法满足这个需求，需要创建自定义验证器。
在响应式表单中添加自定义验证器。在上面内置验证器一节中有一个forbiddenNameValidator函数如下：
从" @angular/forms "导入{验证器}；
.
ngOnInit(): void {
this.heroForm=new FormGroup({
名称：新表单控件(this.hero.name，[
验证器。必需的，
Validators.minLength(4)，
//1、添加自定义验证器
forbiddenNameValidator(/bob/i)
])
});
}
//2、实现自定义验证器，功能为禁止输入带有鲍勃字符串的值
biddenNameValidator的导出函数(nameRe: RegExp): ValidatorFn {
return(control:抽象控件):验证错误 null={
const forbidden=namere。测试(控制。值)；
//3、在值有效时返回空，或无效时返回验证错误对象
禁止返回？{ forbiddenName:{ value:control。value } }:null；
};
}在模板驱动表单中添加自定义验证器。要为模板添加一个指令，该指令包含了验证器函数。同时，该指令需要把自己注册成为NG _验证器的提供者。如下所示：
//1、导入相关类
从" @angular/forms "导入{ NG_VALIDATORS，Validator，AbstractControl，验证错误}。
从" @角度/核心"导入{输入}
@指令({
选择器："[appForbiddenName]"，
//2、注册成为NG _验证器令牌的提供者
提供者：[{provide: NG_VALIDATORS，use existing:ForbiddenValidatorDirective，multi: true}]
})
ForbiddenValidatorDirective的导出类实现验证程序{
@ Input( appForbiddenName )for bid denname= ；
//3、实现验证器接口，即实现生效函数
validate(控件：抽象控件):验证错误 null {
//在值有效时返回空，或无效时返回验证错误对象
退回这个。forbiddenName？forbiddenname验证器(新的RegExp(this。禁止的名称， I ))(控制)
:空
}
}
//4、自定义验证函数
biddenNameValidator的导出函数(nameRe: RegExp): ValidatorFn {
return(control:抽象控件):验证错误 null={
const forbidden=namere。测试(控制。值)；
//3、在值有效时返回空，或无效时返回验证错误对象
禁止返回？{ forbiddenName:{ value:control。value } }:null；
};
}输入类型=文本必选appForbiddenName= bob [(ng model)]= hero。名称更多编程相关知识，请访问：编程入门！以上就是有角的学习之浅析响应式表单的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。