Skip to content

Commit b281d77

Browse files
Aaryan-kapurAaryan-kapur
committed
fix-search-overflow
1 parent 9faf16a commit b281d77

12 files changed

+496
-255
lines changed

‎src/app/contact/contact-form/contact-form.component.html

Lines changed: 106 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,128 @@
11
<div class="overlay">
22
<div class="overlay-content">
33
<button class="form-close" (click)="hideContactForm.emit(false)">x</button>
4-
<form class="contact-form" [formGroup]="contactForm" novalidate (ngSubmit)="sendtosuperuser(contactForm.value); showSubmit()"
5-
method="POST" action="https://formspree.io/office@fossasia.org">
4+
<form
5+
class="contact-form"
6+
[formGroup]="contactForm"
7+
novalidate
8+
(ngSubmit)="sendtosuperuser(contactForm.value); showSubmit()"
9+
method="POST"
10+
action="https://formspree.io/office@fossasia.org"
11+
>
612
<fieldset>
713
<legend>Contact Form</legend>
8-
<div class="form-group">
14+
<div class="form-group getRawValue">
915
<label class="form-label" for="name">*Name </label>
10-
<input type="text" formControlName="name" id="name" placeholder="Your name" name="name">
11-
<div class="validators"><small *ngIf="!(contactForm.controls.name.valid || (contactForm.controls.name.pristine && !submitted))">
12-
Name is required
13-
</small></div>
16+
<input
17+
type="text"
18+
formControlName="name"
19+
id="name"
20+
placeholder="Your name"
21+
name="name"
22+
/>
23+
<div class="validators">
24+
<small
25+
*ngIf="
26+
!(
27+
contactForm.controls.name.valid ||
28+
(contactForm.controls.name.pristine && !submitted)
29+
)
30+
"
31+
>
32+
Name is required
33+
</small>
34+
</div>
1435
</div>
1536
<div class="form-group">
1637
<label class="form-label" for="email">*Email </label>
17-
<input type="email" formControlName="email" id="email" placeholder="xyz@example.com" name="email">
18-
<div class="validators"><small *ngIf="!(contactForm.controls.email.valid || (contactForm.controls.email.pristine && !submitted))">
19-
Valid Email is required
20-
</small> </div>
38+
<input
39+
type="email"
40+
formControlName="email"
41+
id="email"
42+
placeholder="xyz@example.com"
43+
name="email"
44+
/>
45+
<div class="validators">
46+
<small
47+
*ngIf="
48+
!(
49+
contactForm.controls.email.valid ||
50+
(contactForm.controls.email.pristine && !submitted)
51+
)
52+
"
53+
>
54+
Valid Email is required
55+
</small>
56+
</div>
2157
</div>
2258
<div class="form-group">
2359
<label class="form-label" for="telephone">*Mobile Number </label>
2460
<span class="telephonegroup">
25-
<select formControlName="countrycode" id="telephone" name="countrycode" placeholder="Country Code" [(ngModel)]="selectedValue" >
26-
<option *ngFor="let c of countries" [value]="c.code">{{c.name}} (+{{c.code}})</option>
27-
</select> -
28-
<input type="tel" formControlName="telephone" id="telephone" placeholder="Mobile Number" name="telephone">
29-
</span>
30-
<div class="validators"><small *ngIf="!(contactForm.controls.telephone.valid || (contactForm.controls.telephone.pristine && !submitted))">
31-
Valid Mobile Number is required.
32-
</small> </div>
61+
<select
62+
formControlName="countrycode"
63+
id="telephone"
64+
name="countrycode"
65+
placeholder="Country Code"
66+
[(ngModel)]="selectedValue"
67+
>
68+
<option *ngFor="let c of countries" [value]="c.code"
69+
>{{ c.name }} (+{{ c.code }})</option
70+
>
71+
</select>
72+
-
73+
<input
74+
type="tel"
75+
formControlName="telephone"
76+
id="telephone"
77+
placeholder="Mobile Number"
78+
name="telephone"
79+
/>
80+
</span>
81+
<div class="validators">
82+
<small
83+
*ngIf="
84+
!(
85+
contactForm.controls.telephone.valid ||
86+
(contactForm.controls.telephone.pristine && !submitted)
87+
)
88+
"
89+
>
90+
Valid Mobile Number is required.
91+
</small>
92+
</div>
3393
</div>
3494
<div class="form-group">
3595
<label class="form-label" for="input">*Message</label>
36-
<textarea rows="30" cols="8" type="text" formControlName="message" id="input" name="message" placeholder="Minimum 100 characters"></textarea>
37-
<div class="validators"><small *ngIf="!(contactForm.controls.message.valid || (contactForm.controls.message.pristine && !submitted))">
38-
Describe more with Minimum 100 characters.
39-
</small> </div>
96+
<textarea
97+
rows="30"
98+
cols="8"
99+
type="text"
100+
formControlName="message"
101+
id="input"
102+
name="message"
103+
placeholder="Minimum 100 characters"
104+
></textarea>
105+
<div class="validators">
106+
<small
107+
*ngIf="
108+
!(
109+
contactForm.controls.message.valid ||
110+
(contactForm.controls.message.pristine && !submitted)
111+
)
112+
"
113+
>
114+
Describe more with Minimum 100 characters.
115+
</small>
116+
</div>
40117
</div>
41118
<div class="form-group">
42119
<small>*All fields are mandatory</small>
43-
<button type="submit" [disabled]="!contactForm.valid" value="submit">Submit<input type="hidden" name="_next" value="/contact" /></button>
44-
<small *ngIf="submitted && contactForm.valid ">Your Form has been submitted</small>
120+
<button type="submit" [disabled]="!contactForm.valid" value="submit">
121+
Submit<input type="hidden" name="_next" value="/contact" />
122+
</button>
123+
<small *ngIf="submitted && contactForm.valid"
124+
>Your Form has been submitted</small
125+
>
45126
</div>
46127
</fieldset>
47128
</form>

‎src/app/contact/contact-form/contact-form.component.ts

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
2-
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
2+
import {
3+
FormGroup,
4+
FormControl,
5+
FormBuilder,
6+
Validators
7+
} from '@angular/forms';
38
import { HttpClient, HttpHeaders } from '@angular/common/http';
49
import { countrycodearray } from '../../shared/countrycode/countrycode';
5-
610
@Component({
711
selector: 'contact-form',
812
templateUrl: './contact-form.component.html',
@@ -15,40 +19,53 @@ export class ContactFormComponent implements OnInit {
1519
public countries = countrycodearray;
1620
@Output() hideContactForm: EventEmitter<any> = new EventEmitter();
1721

18-
constructor( private http: HttpClient ) { }
22+
constructor(private http: HttpClient) {}
1923

2024
ngOnInit() {
2125
this.contactForm = new FormGroup({
2226
name: new FormControl('', [<any>Validators.required]),
23-
email: new FormControl('', [<any>Validators.required, <any>Validators.email]),
27+
email: new FormControl('', [
28+
<any>Validators.required,
29+
<any>Validators.email
30+
]),
2431
countrycode: new FormControl('', [<any>Validators.required]),
25-
telephone: new FormControl('', [<any>Validators.required, <any>Validators.minLength(10), <any>Validators.pattern('^[0-9]*$')]),
26-
message: new FormControl('', [<any>Validators.required, <any>Validators.minLength(100)])
27-
});
32+
telephone: new FormControl('', [
33+
<any>Validators.required,
34+
<any>Validators.minLength(10),
35+
<any>Validators.pattern('^[0-9]*$')
36+
]),
37+
message: new FormControl('', [
38+
<any>Validators.required,
39+
<any>Validators.minLength(100)
40+
])
41+
});
2842
}
29-
3043
public sendtosuperuser(user) {
3144
this.hideContactForm.emit(false);
3245
const headers = new HttpHeaders();
33-
const formObj = user.getRawValue();
46+
const formObj = this.contactForm.value;
3447
const data = JSON.stringify(formObj);
35-
48+
console.log(this.contactForm.value);
3649

3750
headers.append('Content-Type', 'application/X-www-form-urlencoded');
3851
headers.append('Accept', 'application/json');
3952

40-
this.http.post('https://formspree.io/office@fossasia.org', data, { headers: headers })
41-
.subscribe((response) => {
42-
this.http.post('https://formspree.io/office@fossasia.org', data, { headers: headers })
43-
.subscribe((responsesent) => {
53+
this.http
54+
.post('https://formspree.io/office@fossasia.org', data, {
55+
headers: headers
56+
})
57+
.subscribe(response => {
58+
this.http
59+
.post('https://formspree.io/office@fossasia.org', data, {
60+
headers: headers
61+
})
62+
.subscribe(responsesent => {
4463
console.log('Sent successfully');
4564
});
4665
});
4766
}
4867

49-
5068
public showSubmit() {
5169
this.submitted = true;
5270
}
53-
5471
}

0 commit comments

Comments
 (0)