Skip to content

Commit 6971add

Browse files
rohitazadrohitazad
committed
sign up form coding done
1 parent df933a9 commit 6971add

File tree

5 files changed

+502
-56
lines changed

5 files changed

+502
-56
lines changed

‎src/app/ram/page-not-found/page-not-found.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
<p>
2-
page-not-found works!
2+
page-not-found works! page here
33
</p>

‎src/app/ram/register-client/register-client.component.html

+152-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,152 @@
1-
<p>
2-
register-client works!
3-
</p>
1+
<div class="row">
2+
<div class="col-sm-12">
3+
<div class="panel panel-primary">
4+
<div class="panel-heading">{{clientMessage.title}}</div>
5+
<div class="panel-body">
6+
7+
<form class="form-horizontal" novalidate (ngSubmit)="save()" [formGroup]="customerForm">
8+
<fieldset>
9+
<div class="form-group" [ngClass]="{'has-error': (customerForm.get('firstName').touched ||
10+
customerForm.get('firstName').dirty) &&
11+
!customerForm.get('firstName').valid }">
12+
<label class="col-md-2 control-label" for="firstNameId">First Name</label>
13+
<div class="col-md-8">
14+
<input class="form-control" formControlName="firstName" id="firstNameId" placeholder="First Name (required)" />
15+
<span class="help-block" *ngIf="(customerForm.get('firstName').touched ||
16+
customerForm.get('firstName').dirty) &&
17+
customerForm.get('firstName').errors">
18+
<span *ngIf="customerForm.get('firstName').errors.required">Please enter your first name.</span>
19+
<span *ngIf="customerForm.get('firstName').errors.minlength">
20+
The first name must be longer than 3 characters.
21+
</span>
22+
</span>
23+
<span></span>
24+
</div>
25+
</div>
26+
27+
<div class="form-group" [ngClass]="{'has-error':(customerForm.get('lastName').touched ||
28+
customerForm.get('lastName').dirty) &&
29+
!customerForm.get('lastName').valid}">
30+
<label class="col-md-2 control-label" for="lastNameId">Last Name</label>
31+
<div class="col-md-8">
32+
<input class="form-control" formControlName="lastName" id="lastNameId" placeholder="Last Name (required)" />
33+
<span class="help-block" *ngIf="(customerForm.get('lastName').touched ||
34+
customerForm.get('lastName').dirty) &&
35+
customerForm.get('lastName').errors">
36+
<span *ngIf="customerForm.get('lastName').errors.required">Please enter your last name.</span>
37+
<span *ngIf="customerForm.get('lastName').errors.maxlength">The last name must be not longer than 50 characters.</span>
38+
</span>
39+
</div>
40+
</div>
41+
42+
<div formGroupName="emailGroup" [ngClass]="{'has-error': customerForm.get('emailGroup').errors }">
43+
<div class="form-group" [ngClass]="{'has-error': emailMessage }">
44+
<label class="col-md-2 control-label" for="emailId">Email</label>
45+
46+
<div class="col-md-8">
47+
<input class="form-control" id="emailId" type="email" placeholder="Email (required)" formControlName="email" />
48+
<span class="help-block" *ngIf="emailMessage">
49+
{{ emailMessage }}
50+
</span>
51+
</div>
52+
</div>
53+
54+
<div class="form-group" [ngClass]="{'has-error': (customerForm.get('emailGroup.confirmEmail').touched ||
55+
customerForm. get('emailGroup.confirmEmail').dirty) &&
56+
!customerForm.get('emailGroup.confirmEmail').valid }">
57+
<label class="col-md-2 control-label" for="confirmEmailId">Confirm Email</label>
58+
59+
<div class="col-md-8">
60+
<input class="form-control" id="confirmEmailId" type="email" placeholder="Confirm Email (required)" formControlName="confirmEmail"
61+
/>
62+
<span class="help-block" *ngIf="(customerForm.get('emailGroup.confirmEmail').touched ||
63+
customerForm.get('emailGroup.confirmEmail').dirty) &&
64+
(customerForm.get('emailGroup.confirmEmail').errors ||
65+
customerForm.get('emailGroup').errors) ">
66+
<span *ngIf="customerForm.get('emailGroup.confirmEmail').errors?.required">
67+
Please confirm your email address.
68+
</span>
69+
<span *ngIf="customerForm.get('emailGroup').errors?.match">
70+
The confirmation does not match the email address.
71+
</span>
72+
</span>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<div class="form-group" [ngClass]="{'has-error': !customerForm.get('phone').valid }">
78+
<label class="col-md-2 control-label" for="phoneId">Phone</label>
79+
80+
<div class="col-md-8">
81+
<input class="form-control" id="phoneId" type="tel" placeholder="Phone" formControlName="phone" />
82+
<span class="help-block" *ngIf="customerForm.get('phone').errors">
83+
<span *ngIf="customerForm.get('phone').errors.required">
84+
Please enter your phone number.
85+
</span>
86+
</span>
87+
</div>
88+
</div>
89+
90+
<div class="form-group">
91+
<label class="col-md-2 control-label">Send OTP </label>
92+
<div class="col-md-8">
93+
<label class="radio-inline">
94+
<input type="radio" value="email" formControlName="sendOtp">Email
95+
</label>
96+
<label class="radio-inline">
97+
<input type="radio" value="text" formControlName="sendOtp">Text
98+
</label>
99+
</div>
100+
</div>
101+
102+
<div class="form-group" [ngClass]="{'has-error': (customerForm.get('rating').touched ||
103+
customerForm.get('rating').dirty) &&
104+
!customerForm.get('rating').valid }">
105+
<label class="col-md-2 control-label" for="ratingId">Rating</label>
106+
107+
<div class="col-md-8">
108+
<input class="form-control" id="ratingId" type="number" formControlName="rating" />
109+
<span class="help-block" *ngIf="(customerForm.get('rating').touched
110+
|| customerForm.get('rating').dirty) &&
111+
customerForm.get('rating').errors">
112+
<span *ngIf="customerForm.get('rating').errors.range">
113+
Please rate your experience from 1 to 5.
114+
</span>
115+
</span>
116+
</div>
117+
</div>
118+
119+
<div class="form-group">
120+
<div class="col-md-offset-1 col-md-8 checkbox">
121+
<label>
122+
<input id="sendCatalogId" type="checkbox" formControlName="sendCatalog"> Send me your catalog
123+
</label>
124+
</div>
125+
</div>
126+
127+
<div class="form-group">
128+
<div class="col-md-4 col-md-offset-2">
129+
<span>
130+
<button class="btn btn-primary" type="submit" [disabled]="!customerForm.valid">
131+
Save
132+
</button>
133+
</span>
134+
135+
</div>
136+
</div>
137+
138+
</fieldset>
139+
</form>
140+
141+
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
147+
148+
<br>Dirty: {{ customerForm.dirty }}
149+
<br>Touched: {{ customerForm.touched }}
150+
<br>Valid: {{ customerForm.valid }}
151+
<br>Value: {{ customerForm.value | json }}
152+

‎src/app/ram/register-client/register-client.component.ts

+126-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,32 @@
1+
12
import { Component, OnInit } from '@angular/core';
3+
import { FormGroup, FormBuilder, Validators, AbstractControl, ValidatorFn, FormArray } from '@angular/forms';
4+
import 'rxjs/add/operator/debounceTime';
5+
6+
7+
// here function start
8+
function emailMatcher(c: AbstractControl): { [key: string]: boolean } | null {
9+
let emailControl = c.get('email');
10+
let confirmControl = c.get('confirmEmail');
11+
if (emailControl.pristine || confirmControl.pristine) {
12+
return null;
13+
}
14+
if (emailControl.value === confirmControl.value) {
15+
return null;
16+
}
17+
return { 'match': true };
18+
}
19+
20+
function ratingRange(min: number, max: number): ValidatorFn {
21+
return (c: AbstractControl): { [key: string]: boolean } | null => {
22+
if (c.value !== undefined && (isNaN(c.value) || c.value < min || c.value > max)) {
23+
return { 'range': true };
24+
};
25+
return null;
26+
};
27+
}
28+
29+
// here function end
230

331
@Component({
432
selector: 'app-register-client',
@@ -7,9 +35,106 @@ import { Component, OnInit } from '@angular/core';
735
})
836
export class RegisterClientComponent implements OnInit {
937

10-
constructor() { }
38+
private clientMessage = {
39+
title: 'Client Registration Form',
40+
validationMessages:{
41+
firtName :{
42+
required: 'Please enter your first name.',
43+
minlength: 'The first name must be longer than 3 characters.'
44+
},
45+
lastName : {
46+
required: 'Please enter your last name.',
47+
maxlength: 'The last name must be not longer than 50 characters.'
48+
},
49+
email : {
50+
required: 'Please enter your email address.',
51+
pattern: 'Please enter a valid email address.',
52+
minlength: 'Please enter at least 4 characters.'
53+
},
54+
confirmEmail : {
55+
required : 'Please confirm your email address.',
56+
match : 'The confirmation does not match the email address.'
57+
},
58+
phone : {
59+
required:'Please enter your phone number.'
60+
},
61+
rating : {
62+
range : 'Please rate your experience from 1 to 5.'
63+
}
64+
}
65+
}
66+
67+
68+
customerForm: FormGroup;
69+
emailMessage: string;
70+
private validationMessages = {
71+
required: 'Please enter your email address.',
72+
pattern: 'Please enter a valid email address.',
73+
minlength: 'Please enter at least 4 characters.'
74+
};
75+
76+
77+
constructor(private fb: FormBuilder) { }
1178

1279
ngOnInit() {
80+
this.customerForm = this.fb.group({
81+
firstName: ['', [Validators.required, Validators.minLength(3)]],
82+
lastName: ['', [Validators.required, Validators.maxLength(50)]],
83+
emailGroup: this.fb.group({
84+
email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+'),
85+
Validators.minLength(4)]],
86+
confirmEmail: ['', Validators.required],
87+
}, { validator: emailMatcher }),
88+
phone: '',
89+
sendOtp: 'email',
90+
rating: ['', ratingRange(1, 5)],
91+
sendCatalog: [true]
92+
93+
})
94+
95+
// sendOtp
96+
this.customerForm.get('sendOtp').valueChanges
97+
.subscribe(value => {
98+
this.setNotification(value)
99+
});
100+
101+
// email id message get here
102+
const emailControl = this.customerForm.get('emailGroup.email');
103+
emailControl.valueChanges.debounceTime(1000).subscribe(value => {
104+
console.log(value);
105+
this.setMessage(emailControl)
106+
});
107+
}
108+
109+
// set Message
110+
setMessage(c: AbstractControl): void {
111+
this.emailMessage = '';
112+
if ((c.touched || c.dirty) && c.errors) {
113+
this.emailMessage = Object.keys(c.errors).map(key =>
114+
this.validationMessages[key]).join(' ');
115+
}
116+
console.log('c' + c);
117+
console.log('c.touched - ' + c.touched);
118+
console.log('c.dirty - ' + c.dirty);
119+
console.log('c.errors - ' + c.errors);
120+
console.log(c.errors);
121+
console.log(c);
122+
}
123+
124+
// sendOtp code here
125+
setNotification(notifyVia: string): void {
126+
const phoneControl = this.customerForm.get('phone');
127+
if (notifyVia === 'text') {
128+
phoneControl.setValidators(Validators.required);
129+
} else {
130+
phoneControl.clearValidators();
131+
}
132+
phoneControl.updateValueAndValidity();
133+
}
134+
135+
save(): void {
136+
console.log(this.customerForm);
137+
console.log('Saved: ' + JSON.stringify(this.customerForm.value));
13138
}
14139

15140
}

0 commit comments

Comments
 (0)