Skip to content

Commit a806eab

Browse files
Deepika516Deepika516
committed
fix(arc-saas): validations changes
validations changes GH-64
1 parent 4d393d4 commit a806eab

File tree

9 files changed

+161
-53
lines changed

9 files changed

+161
-53
lines changed

‎projects/saas-ui/src/app/main/components/tenant-registration/tenant-registration.component.html‎

Lines changed: 64 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ <h2>Tenant Registration</h2>
2626
nbTooltip="Please enter your first name. This field is required."
2727
></nb-icon>
2828
</div>
29+
<div class="error-msg"
30+
*ngIf="tenantRegForm.get('firstName').hasError('pattern') && tenantRegForm.get('firstName').touched">
31+
First Name must contain only characters.
32+
</div>
2933
</div>
3034
</div>
3135

@@ -48,6 +52,10 @@ <h2>Tenant Registration</h2>
4852
nbTooltip="Please enter your Last name. This field is required."
4953
></nb-icon>
5054
</div>
55+
<div class="error-msg"
56+
*ngIf="tenantRegForm.get('lastName').hasError('pattern') && tenantRegForm.get('lastName').touched">
57+
Last Name must contain only characters.
58+
</div>
5159
</div>
5260
</div>
5361

@@ -95,15 +103,15 @@ <h2>Tenant Registration</h2>
95103
></nb-icon>
96104
</div>
97105
</div>
98-
<div
106+
<div class="error-msg"
99107
*ngIf="
100108
tenantRegForm.get('email').hasError('required') &&
101109
tenantRegForm.get('email').touched
102-
"
110+
"
103111
>
104112
Email is required.
105113
</div>
106-
<div
114+
<div class="error-msg"
107115
*ngIf="
108116
tenantRegForm.get('email').hasError('email') &&
109117
tenantRegForm.get('email').touched
@@ -147,6 +155,23 @@ <h2>Tenant Registration</h2>
147155
/>
148156
</div>
149157
</div>
158+
<div class="error-msg"
159+
*ngIf="
160+
tenantRegForm.get('zip').hasError('pattern') &&
161+
tenantRegForm.get('zip').touched
162+
"
163+
>
164+
Zip code should only contain numbers.
165+
</div>
166+
<div
167+
class="error-msg"
168+
*ngIf="
169+
tenantRegForm.get('zip').hasError('maxlength') &&
170+
tenantRegForm.get('zip').touched
171+
"
172+
>
173+
Maximum length exceeded.
174+
</div>
150175
</div>
151176

152177
<div class="input-box">
@@ -164,6 +189,14 @@ <h2>Tenant Registration</h2>
164189
/>
165190
</div>
166191
</div>
192+
<div class="error-msg"
193+
*ngIf="
194+
tenantRegForm.get('country').hasError('pattern') &&
195+
tenantRegForm.get('country').touched
196+
"
197+
>
198+
Country must contain only characters.
199+
</div>
167200
</div>
168201
<!-- key -->
169202
<div class="input-box">
@@ -180,34 +213,40 @@ <h2>Tenant Registration</h2>
180213
status="“info”"
181214
formControlName="key"
182215
nbInput
183-
[ngClass]="{
184-
'ng-invalid':
185-
tenantRegForm.get('key').invalid &&
186-
(tenantRegForm.get('key').dirty ||
187-
tenantRegForm.get('key').touched),
188-
}"
189216
/>
190217
<nb-icon
191218
icon="info-outline"
192219
class="info-icon"
193220
nbTooltip="Enter a unique key starting with an alphabet. This field is required and has a maximum length of 10 characters. Special characters are not allowed"
194221
></nb-icon>
195-
<!-- Inline error message -->
196-
<nb-tooltip
197-
*ngIf="
198-
tenantRegForm.get('key').invalid &&
199-
(tenantRegForm.get('key').dirty ||
200-
tenantRegForm.get('key').touched)
201-
"
202-
[attr.id]="'keyError'"
203-
[nbTooltip]="
204-
tenantRegForm.get('key').errors?.keyInvalid
205-
? 'Key must start with an alphabet, have a maximum length of 10 characters, and contain no special characters.'
206-
: null
207-
"
208-
>
209-
</nb-tooltip>
210222
</div>
223+
<div
224+
class="error-msg"
225+
*ngIf="
226+
tenantRegForm.get('key').hasError('required') &&
227+
tenantRegForm.get('key').touched
228+
"
229+
>
230+
Sub-domain is required.
231+
</div>
232+
<div
233+
class="error-msg"
234+
*ngIf="
235+
tenantRegForm.get('key').hasError('maxlength') &&
236+
tenantRegForm.get('key').touched
237+
"
238+
>
239+
Maximum length exceeded.
240+
</div>
241+
<div
242+
class="error-msg"
243+
*ngIf="
244+
tenantRegForm.get('key').hasError('pattern') &&
245+
tenantRegForm.get('key').touched
246+
"
247+
>
248+
Invalid characters used.
249+
</div>
211250
</div>
212251
</div>
213252
<!-- domain -->
@@ -232,7 +271,7 @@ <h2>Tenant Registration</h2>
232271
></nb-icon>
233272
</div>
234273
</div>
235-
<div *ngIf="tenantRegForm.errors?.domainMismatch">
274+
<div *ngIf="tenantRegForm.errors?.domainMismatch" class="error-msg">
236275
Email domain does not match the domain part of the email
237276
address.
238277
</div>

‎projects/saas-ui/src/app/main/components/tenant-registration/tenant-registration.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@
3939
}
4040
}
4141

42+
43+
44+
.error-msg {
45+
color: red;
46+
font-size: 14px;
47+
margin-top: 3px;
48+
}
49+
4250
.input-container {
4351
position: relative;
4452
}

‎projects/saas-ui/src/app/main/components/tenant-registration/tenant-registration.component.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,15 @@ export class TenantRegistrationComponent {
3737
) {
3838
this.tenantRegForm = this.fb.group(
3939
{
40-
firstName: ['', [Validators.required]],
41-
lastName: ['', [Validators.required]],
42-
name: ['', Validators.required], // for company name
40+
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
41+
lastName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
42+
name: ['',[Validators.required]], // for company name
4343
email: ['', [Validators.required, Validators.email]],
4444
address: [''],
45-
country: ['', Validators.required],
46-
zip: [''],
47-
key: ['', [Validators.required, keyValidator()]],
45+
country: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
46+
zip: ['',[Validators.pattern('^[0-9]+$'),Validators.maxLength(9)]],
47+
key: ['', [Validators.required, Validators.maxLength(10),
48+
Validators.pattern('^[a-zA-Z][a-zA-Z0-9]*$')]],
4849
domains: ['', Validators.required],
4950
planId: [''],
5051
},

‎projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.html‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ <h3>Signup to ARC-SaaS</h3>
2828
nbTooltip="Please enter your first name. This field is required."
2929
></nb-icon>
3030
</div>
31+
<div class="error-msg"
32+
*ngIf="addLeadForm.get('firstName').hasError('pattern') && addLeadForm.get('firstName').touched">
33+
First Name must contain only characters.
34+
</div>
3135
</div>
3236
</div>
3337

@@ -50,6 +54,10 @@ <h3>Signup to ARC-SaaS</h3>
5054
nbTooltip="Please enter your Last name. This field is required."
5155
></nb-icon>
5256
</div>
57+
<div class="error-msg"
58+
*ngIf="addLeadForm.get('lastName').hasError('pattern') && addLeadForm.get('lastName').touched">
59+
Last Name must contain only characters.
60+
</div>
5361
</div>
5462
</div>
5563

@@ -98,15 +106,15 @@ <h3>Signup to ARC-SaaS</h3>
98106
</div>
99107
</div>
100108

101-
<div
109+
<div class="error-msg"
102110
*ngIf="
103111
addLeadForm.get('email').hasError('required') &&
104112
addLeadForm.get('email').touched
105113
"
106114
>
107115
Email is required.
108116
</div>
109-
<div
117+
<div class="error-msg"
110118
*ngIf="
111119
addLeadForm.get('email').hasError('email') &&
112120
addLeadForm.get('email').touched
@@ -150,6 +158,23 @@ <h3>Signup to ARC-SaaS</h3>
150158
/>
151159
</div>
152160
</div>
161+
<div class="error-msg"
162+
*ngIf="
163+
addLeadForm.get('zip').hasError('pattern') &&
164+
addLeadForm.get('zip').touched
165+
"
166+
>
167+
Zip code should only contain numbers.
168+
</div>
169+
<div
170+
class="error-msg"
171+
*ngIf="
172+
addLeadForm.get('zip').hasError('maxlength') &&
173+
addLeadForm.get('zip').touched
174+
"
175+
>
176+
Maximum length exceeded.
177+
</div>
153178
</div>
154179

155180
<div class="input-box">
@@ -171,6 +196,14 @@ <h3>Signup to ARC-SaaS</h3>
171196
nbTooltip="Please enter your country. This field is required."
172197
></nb-icon>
173198
</div>
199+
<div class="error-msg"
200+
*ngIf="
201+
addLeadForm.get('country').hasError('pattern') &&
202+
addLeadForm.get('country').touched
203+
"
204+
>
205+
Country must contain only characters.
206+
</div>
174207
</div>
175208
</div>
176209
</div>

‎projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
}
1818
}
1919

20+
.error-msg {
21+
color: red;
22+
font-size: 14px;
23+
margin-top: 3px;
24+
}
25+
2026
.required {
2127
color: red;
2228
}

‎projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ export class AddLeadComponent {
2424
private fb: FormBuilder,
2525
) {
2626
this.addLeadForm = this.fb.group({
27-
firstName: ['', [Validators.required]],
28-
lastName: ['', [Validators.required]],
27+
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')] ],
28+
lastName: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')] ],
2929
companyName: ['', Validators.required],
3030
email: ['', [Validators.required, Validators.email]],
3131
address: [''],
32-
zip: [''],
33-
country: ['', Validators.required],
32+
zip: ['',[Validators.pattern('^[0-9]+$'),Validators.maxLength(9)]],
33+
country: ['', [Validators.required,Validators.pattern('^[a-zA-Z]+$')]],
3434

3535
});
3636
}

‎projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.html‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -34,22 +34,34 @@ <h2>Please Complete Your registration</h2>
3434
class="info-icon"
3535
nbTooltip="Enter a unique key starting with an alphabet. This field is required and has a maximum length of 10 characters. Special characters are not allowed"
3636
></nb-icon>
37-
<!-- Inline error message -->
38-
<nb-tooltip
39-
*ngIf="
40-
addTenantForm.get('key').invalid &&
41-
(addTenantForm.get('key').dirty ||
42-
addTenantForm.get('key').touched)
43-
"
44-
[attr.id]="'keyError'"
45-
[nbTooltip]="
46-
addTenantForm.get('key').errors?.keyInvalid
47-
? 'Key must start with an alphabet, have a maximum length of 10 characters, and contain no special characters.'
48-
: null
49-
"
50-
>
51-
</nb-tooltip>
5237
</div>
38+
<div
39+
class="error-msg"
40+
*ngIf="
41+
addTenantForm.get('key').hasError('required') &&
42+
addTenantForm.get('key').touched
43+
"
44+
>
45+
Sub-domain is required.
46+
</div>
47+
<div
48+
class="error-msg"
49+
*ngIf="
50+
addTenantForm.get('key').hasError('maxlength') &&
51+
addTenantForm.get('key').touched
52+
"
53+
>
54+
Maximum length exceeded.
55+
</div>
56+
<div
57+
class="error-msg"
58+
*ngIf="
59+
addTenantForm.get('key').hasError('pattern') &&
60+
addTenantForm.get('key').touched
61+
"
62+
>
63+
Invalid characters used.
64+
</div>
5365
</div>
5466
</div>
5567
<!-- domain -->

‎projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@
2424
}
2525
}
2626

27+
.error-msg {
28+
color: red;
29+
font-size: 14px;
30+
margin-top: 3px;
31+
}
32+
2733
.input-container {
2834
display: flex;
2935
align-items: center;
@@ -38,6 +44,8 @@
3844
box-sizing: border-box;
3945
}
4046

47+
48+
4149
.info-icon {
4250
position: absolute;
4351
right: 10px;

‎projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ export class AddTenantComponent implements OnInit {
3030
private readonly billingPlanService: BillingPlanService,
3131
) {
3232
this.addTenantForm = this.fb.group({
33-
key: ['', [Validators.required, keyValidator()]],
33+
key: ['', [Validators.required, Validators.maxLength(10),
34+
Validators.pattern('^[a-zA-Z][a-zA-Z0-9]*$')]],
3435
domains: ['', Validators.required],
3536
planId: [null],
3637
});

0 commit comments

Comments
 (0)