Skip to content

Commit

Permalink
fix-search-overflow
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aaryan-kapur
Aaryan-kapur committed Mar 31, 2020
1 parent 50d06b0 commit 7f34cca
Show file tree
Hide file tree
Showing 12 changed files with 496 additions and 255 deletions.
131 changes: 106 additions & 25 deletions src/app/contact/contact-form/contact-form.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,47 +1,128 @@
<div class="overlay">
<div class="overlay-content">
<button class="form-close" (click)="hideContactForm.emit(false)">x</button>
<form class="contact-form" [formGroup]="contactForm" novalidate (ngSubmit)="sendtosuperuser(contactForm.value); showSubmit()"
method="POST" action="https://formspree.io/[email protected]">
<form
class="contact-form"
[formGroup]="contactForm"
novalidate
(ngSubmit)="sendtosuperuser(contactForm.value); showSubmit()"
method="POST"
action="https://formspree.io/[email protected]"
>
<fieldset>
<legend>Contact Form</legend>
<div class="form-group">
<div class="form-group getRawValue">
<label class="form-label" for="name">*Name </label>
<input type="text" formControlName="name" id="name" placeholder="Your name" name="name">
<div class="validators"><small *ngIf="!(contactForm.controls.name.valid || (contactForm.controls.name.pristine && !submitted))">
Name is required
</small></div>
<input
type="text"
formControlName="name"
id="name"
placeholder="Your name"
name="name"
/>
<div class="validators">
<small
*ngIf="
!(
contactForm.controls.name.valid ||
(contactForm.controls.name.pristine && !submitted)
)
"
>
Name is required
</small>
</div>
</div>
<div class="form-group">
<label class="form-label" for="email">*Email </label>
<input type="email" formControlName="email" id="email" placeholder="[email protected]" name="email">
<div class="validators"><small *ngIf="!(contactForm.controls.email.valid || (contactForm.controls.email.pristine && !submitted))">
Valid Email is required
</small> </div>
<input
type="email"
formControlName="email"
id="email"
placeholder="[email protected]"
name="email"
/>
<div class="validators">
<small
*ngIf="
!(
contactForm.controls.email.valid ||
(contactForm.controls.email.pristine && !submitted)
)
"
>
Valid Email is required
</small>
</div>
</div>
<div class="form-group">
<label class="form-label" for="telephone">*Mobile Number </label>
<span class="telephonegroup">
<select formControlName="countrycode" id="telephone" name="countrycode" placeholder="Country Code" [(ngModel)]="selectedValue" >
<option *ngFor="let c of countries" [value]="c.code">{{c.name}} (+{{c.code}})</option>
</select> -
<input type="tel" formControlName="telephone" id="telephone" placeholder="Mobile Number" name="telephone">
</span>
<div class="validators"><small *ngIf="!(contactForm.controls.telephone.valid || (contactForm.controls.telephone.pristine && !submitted))">
Valid Mobile Number is required.
</small> </div>
<select
formControlName="countrycode"
id="telephone"
name="countrycode"
placeholder="Country Code"
[(ngModel)]="selectedValue"
>
<option *ngFor="let c of countries" [value]="c.code"
>{{ c.name }} (+{{ c.code }})</option
>
</select>
-
<input
type="tel"
formControlName="telephone"
id="telephone"
placeholder="Mobile Number"
name="telephone"
/>
</span>
<div class="validators">
<small
*ngIf="
!(
contactForm.controls.telephone.valid ||
(contactForm.controls.telephone.pristine && !submitted)
)
"
>
Valid Mobile Number is required.
</small>
</div>
</div>
<div class="form-group">
<label class="form-label" for="input">*Message</label>
<textarea rows="30" cols="8" type="text" formControlName="message" id="input" name="message" placeholder="Minimum 100 characters"></textarea>
<div class="validators"><small *ngIf="!(contactForm.controls.message.valid || (contactForm.controls.message.pristine && !submitted))">
Describe more with Minimum 100 characters.
</small> </div>
<textarea
rows="30"
cols="8"
type="text"
formControlName="message"
id="input"
name="message"
placeholder="Minimum 100 characters"
></textarea>
<div class="validators">
<small
*ngIf="
!(
contactForm.controls.message.valid ||
(contactForm.controls.message.pristine && !submitted)
)
"
>
Describe more with Minimum 100 characters.
</small>
</div>
</div>
<div class="form-group">
<small>*All fields are mandatory</small>
<button type="submit" [disabled]="!contactForm.valid" value="submit">Submit<input type="hidden" name="_next" value="/contact" /></button>
<small *ngIf="submitted && contactForm.valid ">Your Form has been submitted</small>
<button type="submit" [disabled]="!contactForm.valid" value="submit">
Submit<input type="hidden" name="_next" value="/contact" />
</button>
<small *ngIf="submitted && contactForm.valid"
>Your Form has been submitted</small
>
</div>
</fieldset>
</form>
Expand Down
49 changes: 33 additions & 16 deletions src/app/contact/contact-form/contact-form.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import {
FormGroup,
FormControl,
FormBuilder,
Validators
} from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { countrycodearray } from '../../shared/countrycode/countrycode';

@Component({
selector: 'contact-form',
templateUrl: './contact-form.component.html',
Expand All @@ -15,40 +19,53 @@ export class ContactFormComponent implements OnInit {
public countries = countrycodearray;
@Output() hideContactForm: EventEmitter<any> = new EventEmitter();

constructor( private http: HttpClient ) { }
constructor(private http: HttpClient) {}

ngOnInit() {
this.contactForm = new FormGroup({
name: new FormControl('', [<any>Validators.required]),
email: new FormControl('', [<any>Validators.required, <any>Validators.email]),
email: new FormControl('', [
<any>Validators.required,
<any>Validators.email
]),
countrycode: new FormControl('', [<any>Validators.required]),
telephone: new FormControl('', [<any>Validators.required, <any>Validators.minLength(10), <any>Validators.pattern('^[0-9]*$')]),
message: new FormControl('', [<any>Validators.required, <any>Validators.minLength(100)])
});
telephone: new FormControl('', [
<any>Validators.required,
<any>Validators.minLength(10),
<any>Validators.pattern('^[0-9]*$')
]),
message: new FormControl('', [
<any>Validators.required,
<any>Validators.minLength(100)
])
});
}

public sendtosuperuser(user) {
this.hideContactForm.emit(false);
const headers = new HttpHeaders();
const formObj = user.getRawValue();
const formObj = this.contactForm.value;
const data = JSON.stringify(formObj);

console.log(this.contactForm.value);

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

this.http.post('https://formspree.io/[email protected]', data, { headers: headers })
.subscribe((response) => {
this.http.post('https://formspree.io/[email protected]', data, { headers: headers })
.subscribe((responsesent) => {
this.http
.post('https://formspree.io/[email protected]', data, {
headers: headers
})
.subscribe(response => {
this.http
.post('https://formspree.io/[email protected]', data, {
headers: headers
})
.subscribe(responsesent => {
console.log('Sent successfully');
});
});
}


public showSubmit() {
this.submitted = true;
}

}
Loading

0 comments on commit 7f34cca

Please sign in to comment.