使用angular4和nodejs-express搭建一个简单的网站（七）——ReactiveForm

时间：2023-04-05 23:07:15 HTML5

用于用户注册本节分析用户注册组件。用户注册组件主要涉及angular4表单的操作。Angular提供了两种构建表单的技术：反应式表单和模板驱动表单。这两种技术都属于@angular/forms库并共享一组通用的表单控件类。我在用户注册组件(regist.component)中使用ReactiveFormsModule。想要了解更多关于angularforms的知识，可以访问官方文档，文档非常详细。注册组件模板解析用户注册需要用户名、密码、邮箱地址（非必填）。注册表单组件模板代码如下：用户名姓名为必填项！

名称的长度必须至少为4个字符。

名称必须由字母、数字组成

密码

需要密码！密码长度必须至少为8个字符。密码必须由字母、数字、'_'、'-'和大写字母必须大写。重新输入密码

重新输入密码！重新输入密码必须等于密码！电子邮件

邮箱地址格式不正确

提交Cancel进入regist组件后，在name、password、repassword、email中添加相应信息，点击Submit按钮，会触发ngSubmit事件，在form标签中onSubmit()函数中定义了处理ngSubmit事件的函数onSubmit()，onSubmit()函数向服务器发送注册信息novalidate防止浏览器使用原生HTML表单验证，因为angularform这里使用validation，对于响应式表单，需要在模板的form标签中声明formGroup（其中formGroup声明为registForm），需要在input控件（如input、select等）中声明formControlName.)标签。模板中还有一些关于表单验证的内容，比如下面的代码：">...如果窗体状态为脏（dirty）和触摸（touched）密码无效（不合法，窗体控件无效（invalid）表示控件的验证规则不能满足），div标识中的内容会呈现在password控件下方。违反不同的校验规则，会呈现不同的内容，比如上一段代码中的div标签也被包裹起来：需要密码！表示当违反“password.errors.required”规则时，内容为“Passwordisrequired!”将被显示。提交按钮（Submit）上的标记[disabled]="registForm.invalid"表示当表单有不符合验证规则的输入时，该按钮不能使用。取消输入按钮（Cancel）在控件值没有改变（registForm.pristine）时不能使用。模板的基本分析到此结束，我们来看看ts文件中的组件类。注册组件组件类分析注册组件的组件类设计内容比较多，这里分几个部分来分析。第一步是创建响应式表单并为表单定义身份验证规则。FormBuilder、FormGroup和Validators类需要从表单模块中导入。从'@angular/forms'导入{FormBuilder，FormGroup，Validators}；并在构造函数中声明并初始化这三个类。constructor(...privatefb:FormBuilder,privateuserSer:UserService,privatetokenServ:AuthTokenService){...}下一步是使用FormBuilder创建表单。创建一个方法createForm()来创建一个表单。方法中的代码如下：this.registForm=this.fb.group({'name':[this.user.name,[Validators.required,Validators.minLength(4),Validators.pattern(/^[a-z]|[A-Z]|[0-9]$/)]],'密码':[this.user.password,[Validators.required,Validators.minLength(8),Validators.pattern(/^[A-Z][a-zA-Z0-9_-]+$/)]],'email':[this.user.email,Validators.pattern(/^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/)],'repassword':[this.user.password,[Validators.required]]});registForm是FormGroup的一个实例，与模板中的formGroup关联（[formGroup]="registForm"），在类中声明：registForm:FormGroup；使用FormBuilder.group生成响应式表单，FormBuilder.group是一个用来创建FormGroup的工厂方法，它接受一个对象，对象的key和value是FormControl的名字和它的定义。在这个对象中，初始化了name、password、email、repassword这四个FormControl。定义这四个FormControl的初始值分别对应User类的对象user的四个同名属性（repassword对应user.password，用于验证用户密码的重复输入).类中也定义了用户对象：user:User=newUser(0,'','','');表单验证也在FormControl的初始化中定义了验证规则。该表单的校验规则如下：:必须输入内容(Validators.required)requiresatleastxcharacters(Validators.minlength(x))正则校验，必须由字母和数字组成Validators.pattern(/^[a-z]|[A-Z]|[0-9]$/)正则校验，必须由字母、数字、下划线和负号组成，首字母必须大写Validators.pattern(/^[A-Z][a-zA-Z0-9_-]+$/)]]必须符合email格式要求，可以使用Validators.email，也可以使用正则验证。要验证FormControl，您还需要编写get方法来访问表单控件：getname(){returnthis.registForm.get('name');}getpassword(){returnthis.registForm.get('password');}getemail(){returnthis.registForm.get('email');}getrepassword(){returnthis.registForm.get('repassword');这里还需要自定义一个validator，用于验证repassword输入的值是否与password的值相同。自定义验证器由验证工厂函数组成。代码如下：import{AbstractControl,ValidatorFn}from'@angular/forms';导出函数passwordEquals(password:string):ValidatorFn{return(control:AbstractControl):{[key:string]:any}=>{constisEquals=(password===control.value);返回等于？null:{'比较密码':control.value};}}passwordEquals()方法需要传入一个字符串类型的参数，并返回配置的验证器函数。该函数接受一个Angular控制器对象，控制器的值与参数相同时返回null，不同时返回验证错误对象，错误对象为实际控制值的键值对。在表单的repassword属性中添加自定义验证器，但是由于passwordEquals()的参数需要密码控件的值，而密码控件的值在创建表单时无法获取，需要在创建之后获取密码控件有一个值到达。然后，加载自定义验证器的最佳时间是重新密码控件获得焦点时。因此，在模板中为repassword控件的标签添加focus事件：(focus)="checkValid()"，在处理focus事件的checkValid()函数中，为repassword添加自定义验证规则，判断其是否生效value与控件密码的值相同：checkValid(){this.repassword.setValidators([Validators.required,passwordEquals(this.pass.nativeElement.value)]);}this.pass在password的组件中声明了一个引用变量#pass之后，pass@ViewChild('pass')pass:ElementRef;获取密码的组件的值。基本上就是关于用户注册中ReactiveForm的构建和验证。下一章将介绍如何向服务器发送注册信息并导航到下一模块。Angular表单的校验规则和校验方式可以参考官方文档中的介绍。

上一篇：动态配置页面的组件系统

下一篇：基于百度地图的区域重叠判断

使用angular4和nodejs-express搭建一个简单的网站（七）——ReactiveForm相关文章