1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 | < form [formGroup]="formModel" (submit)="submit()"> < div > 用户名:< input type="text" formControlName="username"> 电话:< input type="text" formControlName="mobile"> < div formGroupName="passwordsGroup"> 密码:< input type="password" formControlName="password"> 确认密码:< input type="password" formControlName="pconfirm"> </ div > </ div > < div >< button type="submit">保存</ button ></ div > </ form > |
2. 控制器中创建FormModel
1 2 3 4 5 6 7 8 9 10 | constructor(private http: Http, fb: FormBuilder) { this.formModel = fb.group({ username: ['', [Validators.required, Validators.minLength(10)]], mobile: ['', this.mobileValidator], passwordsGroup: fb.group({ password: [''], pconfirm: [''] }, { validator: this.equalValidator} ), }); } |
3. 创建自定义校验器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | mobileValidator(control: FormControl): any { const myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; const valid = myreg.test(control.value); console.log('mobile result: ' + valid); return valid ? null : {mobile: true}; } equalValidator(group: FormGroup): any { const password: FormControl = group.get('password') as FormControl; const pconfirm: FormControl = group.get('pconfirm') as FormControl; const valid: boolean = password.value === pconfirm.value; console.log('password equal: ' + valid); return valid ? null : {equal: true}; } |
mobileValidator用来校验电话号码是否有效
equalValidator 用来校验两次输入的密码是否一致
4. submit方法
1 2 3 4 5 6 7 8 9 10 | submit() { const isValid: boolean = this.formModel.get('username').valid; console.log('username: ' + isValid); const errors: any = this.formModel.get('username').errors; console.log('username errors' + JSON.stringify(errors)); if ( this.formModel.valid) { console.log(this.formModel.value); } } |
5.完整的代码
作者:Work Hard Work Smart
出处:http://www.cnblogs.com/linlf03/
欢迎任何形式的转载,未经作者同意,请保留此段声明!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步