From 1a30ba4211462589698d26688ec24319e48b740c Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Wed, 11 Jul 2018 15:08:40 +0800
Subject: [PATCH] 提交
---
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