ng2-contact-form
Version:
ng2-contact-form ================
237 lines (211 loc) • 9.05 kB
text/typescript
import { Component, ElementRef } from 'angular2/core';
import { FORM_DIRECTIVES, FormBuilder, Control, ControlGroup, Validators, AbstractControl } from 'angular2/common';
import { CustomValidators } from "ng2-contact-form/src/custom.validators";
declare var document;
declare var window;
const DEFAULT_TEMPLATE = `
<style>
.spinner {
width: 50px;
height: 40px;
font-size: 10px;
}
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
<div class="container">
<div class="col m10 offset-m1 s12">
<div class="row">
<h2 class="ui header">{{ titleAttr }}</h2>
</div>
<div class="{{ alertClass }}" id="result_card" style="display: none">
<i class="tiny material-icons" *ngIf="frameworkCssAttr.toLowerCase() == 'materialize'">info_outline</i>
<i class="glyphicon glyphicon-info-sign" *ngIf="frameworkCssAttr.toLowerCase() == 'bootstrap'"></i>
<span class="grey-text text-darken-4" id="result"></span>
</div>
<div class="row">
<form [ngFormModel]="myForm" (ngSubmit)="sendEmail(myForm.value)" class="col s12">
<div class="field">
<div class="row">
<label>{{ firstnameAttr }}</label><label *ngIf="firstname.hasError('required')"><span style="color: red"> (Required)</span></label>
<input type="text" id="firstnameInput" class="{{ inputsClass }}" [ngFormControl]="firstname">
</div>
<div class="row">
<label>{{ lastnameAttr }}</label><label *ngIf="lastname.hasError('required')"><span style="color: red"> (Required)</span></label>
<input type="text" id="lastnameInput" class="{{ inputsClass }}" [ngFormControl]="lastname">
</div>
<div class="row">
<label>{{ emailAttr }}</label><label *ngIf="email.hasError('required')"><span style="color: red"> (Required)</span></label>
<div *ngIf="email.dirty && !email.valid">
<label *ngIf="email.errors.invalidEmailAddress" style="color: red"> Invalid Email </label>
</div>
<input type="email" id="emailInput" class="{{ inputsClass }}" [ngFormControl]="email">
</div>
<div class="row">
<label>{{ messageAttr }}</label><label *ngIf="message.hasError('required')"><span style="color: red"> (Required)</span></label>
<textarea id="messageTextarea" class="{{ textareaClass }} {{ inputsClass }}" rows="5" [ngFormControl]="message" required></textarea>
</div>
</div>
<div class="row">
<div class="pull-left spinner" style="display: none" id="progress">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div class="pull-left" style="margin-top: 5px">
<input type="submit" [disabled]="!myForm.valid"
class="{{ btnClass }}"
name="action" value="{{ sendAttr }}" />
</div>
</div>
</form>
</div>
</div>
</div>
`;
/*
@component: contact-form
@descrip: Component for implement contact form using ajax and validators
*/
export class ContactForm {
//Properties
myForm: ControlGroup;
firstname: AbstractControl;
lastname: AbstractControl;
email: AbstractControl;
message: AbstractControl;
titleAttr: string;
firstnameAttr: string;
lastnameAttr: string;
emailAttr: string;
messageAttr: string;
sendAttr: string;
urlAttr: string;
frameworkCssAttr: string;
inputsClass: string;
btnClass: string;
textareaClass: string;
alertClass: string;
constructor(fb: FormBuilder, private element:ElementRef) {
//Get attributes values
let tag = this.element.nativeElement;
this.titleAttr = typeof tag.getAttribute('title') !== 'undefined' ? tag.getAttribute('title') : "Title";
this.firstnameAttr = typeof tag.getAttribute('firstname') !== 'undefined' ? tag.getAttribute('firstname') : "First Name";
this.lastnameAttr = typeof tag.getAttribute('lastname') !== 'undefined' ? tag.getAttribute('lastname') : "Last Name";
this.emailAttr = typeof tag.getAttribute('email') !== 'undefined' ? tag.getAttribute('email') : "Email";
this.sendAttr = typeof tag.getAttribute('send') !== 'undefined' ? tag.getAttribute('send') : "Send";
this.messageAttr = typeof tag.getAttribute('message') !== 'undefined' ? tag.getAttribute('message') : "Message";
this.urlAttr = typeof tag.getAttribute('url') !== 'undefined' ? tag.getAttribute('url') : "/send/";
this.frameworkCssAttr = typeof tag.getAttribute('frameworkCss') !== 'undefined' ? tag.getAttribute('frameworkCss') : "bootstrap";
//Check framework css to use
switch(this.frameworkCssAttr.toLowerCase()){
//MaterializeCSS
case 'materialize':
this.inputsClass = "validate";
this.btnClass = "btn-large waves-effect waves-light teal default_color scrollspy";
this.textareaClass = "materialize-textarea";
this.alertClass = "card-panel";
break;
//Bootstrap
default:
this.inputsClass = "form-control";
this.btnClass = "btn btn-default";
this.textareaClass = "";
this.alertClass = "alert alert-info";
break;
}
//Validators form
this.myForm = fb.group({
'firstname': ['', Validators.required],
'lastname': ['', Validators.required],
'email': ['', Validators.compose([Validators.required, CustomValidators.validateEmail])],
'message': ['', Validators.required]
});
this.firstname = this.myForm.controls['firstname'];
this.lastname = this.myForm.controls['lastname'];
this.email = this.myForm.controls['email'];
this.message = this.myForm.controls['message'];
}
/*
@method: sendEmail
@descrip: Event submit for contact form
*/
sendEmail(value: any): void {
//Result to send email
let result = document.querySelector("#result");
let result_card = document.querySelector("#result_card");
let progress = document.querySelector("#progress");
//Hide elements
result_card.style.display = "none";
//Show progress
progress.removeAttribute("style");
//Parameters
let creds = "firstname=" + value.firstname + "&lastname=" + value.lastname;
creds = creds + "&message=" + value.message + "&email=" + value.email;
//Send email
window.fetch(this.urlAttr, {
method: 'POST',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: creds
})
.then((data) => {
let res = data.text();
res.then((message) => {
result.innerHTML = message;
//Show card message and hide progress
result_card.style.display = "block";
progress.style.display = "none";
});
})
.catch((error) => {
result.innerHTML = "Error al procesar el formulario";
//Show card message and hide progress
result_card.style.display = "block";
progress.style.display = "none";
});
}
}