From a3a8c23b196980732a795713a5eb5fe0c7075bf9 Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Wed, 11 Jul 2018 21:47:13 +0800 Subject: [PATCH] Revert "提交" --- src/app/routes/passport/register/register.component.ts | 133 ++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 133 insertions(+), 0 deletions(-) diff --git a/src/app/routes/passport/register/register.component.ts b/src/app/routes/passport/register/register.component.ts new file mode 100644 index 0000000..3745053 --- /dev/null +++ b/src/app/routes/passport/register/register.component.ts @@ -0,0 +1,133 @@ +import { Component, OnDestroy } from '@angular/core'; +import { Router } from '@angular/router'; +import { + FormGroup, + FormBuilder, + Validators, + FormControl, +} from '@angular/forms'; +import { NzMessageService } from 'ng-zorro-antd'; + +@Component({ + selector: 'passport-register', + templateUrl: './register.component.html', + styleUrls: ['./register.component.less'], +}) +export class UserRegisterComponent implements OnDestroy { + form: FormGroup; + error = ''; + type = 0; + loading = false; + visible = false; + status = 'pool'; + progress = 0; + passwordProgressMap = { + ok: 'success', + pass: 'normal', + pool: 'exception', + }; + + constructor( + fb: FormBuilder, + private router: Router, + public msg: NzMessageService, + ) { + this.form = fb.group({ + mail: [null, [Validators.email]], + password: [ + null, + [ + Validators.required, + Validators.minLength(6), + UserRegisterComponent.checkPassword.bind(this), + ], + ], + confirm: [ + null, + [ + Validators.required, + Validators.minLength(6), + UserRegisterComponent.passwordEquar, + ], + ], + mobilePrefix: ['+86'], + mobile: [null, [Validators.required, Validators.pattern(/^1\d{10}$/)]], + captcha: [null, [Validators.required]], + }); + } + + static checkPassword(control: FormControl) { + if (!control) return null; + const self: any = this; + self.visible = !!control.value; + if (control.value && control.value.length > 9) self.status = 'ok'; + else if (control.value && control.value.length > 5) self.status = 'pass'; + else self.status = 'pool'; + + if (self.visible) + self.progress = + control.value.length * 10 > 100 ? 100 : control.value.length * 10; + } + + static passwordEquar(control: FormControl) { + if (!control || !control.parent) return null; + if (control.value !== control.parent.get('password').value) { + return { equar: true }; + } + return null; + } + + // region: fields + + get mail() { + return this.form.controls.mail; + } + get password() { + return this.form.controls.password; + } + get confirm() { + return this.form.controls.confirm; + } + get mobile() { + return this.form.controls.mobile; + } + get captcha() { + return this.form.controls.captcha; + } + + // endregion + + // region: get captcha + + count = 0; + interval$: any; + + getCaptcha() { + this.count = 59; + this.interval$ = setInterval(() => { + this.count -= 1; + if (this.count <= 0) clearInterval(this.interval$); + }, 1000); + } + + // endregion + + submit() { + this.error = ''; + for (const i in this.form.controls) { + this.form.controls[i].markAsDirty(); + this.form.controls[i].updateValueAndValidity(); + } + if (this.form.invalid) return; + // mock http + this.loading = true; + setTimeout(() => { + this.loading = false; + this.router.navigate(['/passport/register-result']); + }, 1000); + } + + ngOnDestroy(): void { + if (this.interval$) clearInterval(this.interval$); + } +} -- Gitblit v1.8.0