overflow_cloud/member_webapp
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

signup

Browse Source
This commit is contained in:
insanity 2018-04-10 19:19:41 +09:00
parent 5809b605b1
commit d5140adfca
2 changed files with 70 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/packages/member/component/signup/signup.component.html
View File

@ -7,29 +7,57 @@
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="email" type="email" pInputText class="input ng-dirty ng-invalid" placeholder="Email" formControlName="email" required> <input id="email" type="email" pInputText class="input ng-dirty ng-invalid" placeholder="Email" formControlName="email" required>
<div *ngIf="signupForm.get('email').touched && signupForm.get('email').errors" class="ui-message ui-messages-error ui-corner-all"> <div *ngIf="email.touched && !email.valid" class="ui-message ui-messages-error ui-corner-all">
Not valid email Invalid email
</div> </div>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="password" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password" <input id="password" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Password" formControlName="password"
required #passwsord="ngModel"> required>
<div #password *ngIf="signupForm.get('password').touched && signupForm.get('password').errors" class="ui-message ui-messages-error ui-corner-all"> <div *ngIf="password.touched && !password.valid" class="ui-message ui-messages-error ui-corner-all">
Not valid password Invalid password
</div> </div>
</span> </span>
</div> </div>
<div class="ui-g-12"> <div class="ui-g-12">
<span class="md-inputfield"> <span class="md-inputfield">
<input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm" <input id="pwConfirm" type="password" pInputText class="input ng-dirty ng-invalid" placeholder="Retype your password" formControlName="pwConfirm"
required validateEqual="password" #confirmPassword="ngModel"> required>
<div *ngIf="pwConfirm.valid || (confirmPassword.pristine && !f.submitted)" class="ui-message ui-messages-error ui-corner-all"> <div *ngIf="pwConfirm.touched && !pwConfirm.valid" class="ui-message ui-messages-error ui-corner-all">
Not matched password Not matched password
</div> </div>
</span> </span>
</div> </div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="name" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Name" formControlName="name" required>
<div *ngIf="name.touched && !name.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid Name
</div>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="phone" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Phone" formControlName="phone" required>
<div *ngIf="phone.touched && !phone.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid phone number
</div>
</span>
</div>
<div class="ui-g-12">
<span class="md-inputfield">
<input id="company" type="text" pInputText class="input ng-dirty ng-invalid" placeholder="Company" formControlName="company" required>
<div *ngIf="company.touched && !company.valid" class="ui-message ui-messages-error ui-corner-all">
Invalid company name
</div>
</span>
</div>
<div class="ui-g-12"> <div class="ui-g-12">
<button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left"> <button type="submit" [disabled]="!signupForm.valid" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left">
<span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span> <span class="ui-button-icon-left ui-c fa fa-fw ui-icon-person"></span>

53
src/packages/member/component/signup/signup.component.ts
View File

@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms'; import { FormGroup, FormBuilder, Validators, AbstractControl, FormControl } from '@angular/forms';
import { Member } from '@loafer/core/reflect'; import { Member } from '../../model';
@Component({ @Component({
selector: 'of-member-signup', selector: 'of-member-signup',
@ -11,15 +11,12 @@ import { Member } from '@loafer/core/reflect';
export class SignupComponent implements OnInit { export class SignupComponent implements OnInit {
signupForm: FormGroup; signupForm: FormGroup;
formErrors = { email: AbstractControl;
'email': '', password: AbstractControl;
'password': '', pwConfirm: AbstractControl;
'pwConfirm': '', name: AbstractControl;
'name': '', phone: AbstractControl;
'phone': '', company: AbstractControl;
'company': ''
};
member: Member;
constructor( constructor(
private router: Router, private router: Router,
@ -45,7 +42,9 @@ export class SignupComponent implements OnInit {
] ]
], ],
'pwConfirm': ['', [ 'pwConfirm': ['', [
Validators.required, Validators.compose([
Validators.required, this.pwMatchValidator
])
] ]
], ],
'name': ['', [ 'name': ['', [
@ -60,17 +59,35 @@ export class SignupComponent implements OnInit {
Validators.required Validators.required
] ]
], ],
}, this.pwdMatchValidator); });
this.email = this.signupForm.controls['email'];
this.password = this.signupForm.controls['password'];
this.pwConfirm = this.signupForm.controls['pwConfirm'];
this.name = this.signupForm.controls['name'];
this.phone = this.signupForm.controls['phone'];
this.company = this.signupForm.controls['company'];
} }
pwdMatchValidator(frm: FormGroup) { pwMatchValidator(control: FormControl): { [s: string]: boolean } {
return frm.get('password').value === frm.get('pwConfirm').value let pw;
? null : {'mismatch': true}; if (control.parent) {
} pw = control.parent.controls['password'].value;
}
if (control.value !== pw) {
return { notMatched: true };
}
}
signup() { signup() {
const signinValue = Object.assign({}, this.signupForm.value); const signinValue = Object.assign({}, this.signupForm.value);
console.log(signinValue); const member: Member = {
email: signinValue.email,
password: signinValue.password,
name: signinValue.name,
phone: signinValue.phone,
companyName: signinValue.company,
};
console.log(member);
} }
} }