利用angular4和nodejs-express构建一个简单的网站(七)—用户注
这一节对用户注册组件进行分析。 注册组件模板分析用户注册需要用户名、密码、邮箱(非必须)三个信息注册表单组件的模板代码如下: <form [formGroup]="registForm" (ngSubmit)="onSubmit()" novalidate> <div class="form-group"> <label for="name">User name</label> <input class="form-control" formControlName="name" id="name" required> <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger"> <div *ngIf="name.errors.required"> Name is required! </div> <div *ngIf="name.errors.minlength"> Name must be at least 4 characters long. </div> <div *ngIf="name.errors.pattern"> Name must be composed of letters,numbers </div> </div> </div> <div class="form-group"> <label for="password">Password</label> <input class="form-control" formControlName="password" type="password" required id="password" #pass> <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger"> <div *ngIf="password.errors.required"> Password is required! </div> <div *ngIf="password.errors.minlength"> Password must be at least 8 characters long. </div> <div *ngIf="password.errors.pattern"> <!--密码必须由字母、数字、下划线和减号组成,首字母要求大写 --> Password must be composed of letters,numbers,'_','-' and Capital letters must be capitalized. </div> </div> </div> <div class="from-group"> <label for="repassword">Re Password</label> <input type="password" class="form-control" required id="repassword" (focus)="checkValid()" formControlName="repassword"> <div class="alert alert-danger" *ngIf="repassword.invalid && (repassword.dirty || repassword.touched)"> <div *ngIf="repassword.errors.required"> Re password is required! </div> <div *ngIf="repassword.errors.comparePassword"> Re password must equal password! </div> </div> </div> <div class="form-group email-group"> <label for="email">Email</label> <input class="form-control" formControlName="email" type="email" id="email"> <div *ngIf="email.invalid &&(email.dirty || email.touched)" class="alert alert-danger"> <div *ngIf="email.errors.pattern"> The email address format is incorrect </div> </div> </div> <div class="form-group form-btn"> <button type="submit" class="btn btn-primary" [disabled]="registForm.invalid">Submit</button> <button type="button" class="btn btn-light" [disabled]="registForm.pristine" (click)="revert()">Cancel</button> </div> </form> 导航到regist组件后在name、password、repassword、email中添加相应的信息,点击Submit按钮,就会触发ngSubmit事件,在form标签中定义处理ngSubmit事件的函数onSubmit(),onSubmit()函数将注册信息发送到服务器。 <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger"> ... </div> 在表单状态为dirty(脏)状态和touched(碰过)状态时如果password为invalid(不合法,表单控件不合法(invalid)表示未能满足控件的验证规则),div标识符中的内容将呈现到password控件的下方。违反了不同的验证规则,会呈现不同的内容,如在上一段代码中的div标签中还包裹着: <div *ngIf="password.errors.required"> Password is required! </div> 表明在违反了“password.errors.required”规则时,会呈现“Password is required!”内容。 注册组件组件类分析注册组件的组件类设计内容较多,在这里分部进行分析。 import { FormBuilder,FormGroup,Validators } from '@angular/forms'; 并在构造方法中声明并初始化这三个类。 constructor( ... private fb: FormBuilder,private userSer: UserService,private tokenServ: 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]$/)]],'password': [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的工厂方法,它接受一个对象,对象的键和值分别是FormControl的名字和它的定义。在这个对象中对name、password、email、repassword四个FormControl进行了初始化。定义了这四个FormControl的初始值对应User类的对象user的四个同名属性(repassword对应的是user.password,用于对用户密码的重复输入进行验证)。user对象也是在类中定义的: user: User = new User(0,'',''); 表单验证在FormControl的初始化中还定义了验证规则,这个表单的验证规则由以下几种:
对FormControl进行验证,还需要编写get方法来访问表单控件: get name() { return this.registForm.get('name'); } get password() { return this.registForm.get('password'); } get email() { return this.registForm.get('email'); } get repassword() { return this.registForm.get('repassword'); } 这里还需要自定义一个验证器,用于验证repassword输入的值是否和password的值相同。 import { AbstractControl,ValidatorFn } from '@angular/forms'; export function passwordEquals(password: string): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { const isEquals = (password === control.value); return isEquals ? null : { 'comparePassword': control.value }; } } passwordEquals()方法需要传入一个string类型的参数,返回配置好的验证器函数。该函数接受一个Angular控制器对象,在控制器的值和参数相同时返回null,不相同时返回验证错误对象,错误对象是一个现实控件值的键值对。 checkValid() { this.repassword.setValidators([Validators.required,passwordEquals(this.pass.nativeElement.value)]); } this.pass是通过在password的<input>组件中声明一个引用变量#pass后,通过 关于angular表单验证规则和验证方法可以查看官方文档中的介绍。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |