@cdf/cdf-ng-contact-us-form
Version:
77 lines • 8.54 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var forms_1 = require("@angular/forms");
require("rxjs/Rx");
var index_1 = require("../models/index");
var CdfContactUsFormComponent = (function () {
function CdfContactUsFormComponent(formBuilder) {
this.formBuilder = formBuilder;
this.NotifyFormSubmitted = new core_1.EventEmitter();
}
CdfContactUsFormComponent.prototype.ngOnInit = function () {
this.CreateForm();
this.contactUsForm.valueChanges
.map(function (value) {
value.name = value.name.toUpperCase();
return value;
})
.subscribe(function (value) {
//console.log('name errors:', this.contactUsForm.controls['name']);
//console.log("Model Driven Form valid value:", JSON.stringify(value));
});
};
CdfContactUsFormComponent.prototype.ngAfterViewInit = function () {
};
CdfContactUsFormComponent.prototype.onFormSubmit = function (e) {
e.preventDefault();
var formModel = new index_1.CdfContactUsFormModel();
formModel.Name = this.contactUsForm.controls['name'].value;
formModel.EmailAddress = this.contactUsForm.controls['emailAddress'].value;
formModel.Message = this.contactUsForm.controls['message'].value;
// console.log('DAS FORM ERRORS', this.contactUsForm.controls[ 'name' ].errors);
// console.log('DAS FORM ERRORS', this.contactUsForm.controls[ 'emailAddress' ].errors);
// console.log('DAS FORM ERRORS', this.contactUsForm.controls[ 'message' ].errors);
// console.log('DAS FORM YO1....', this.contactUsForm.value);
// console.log('DAS FORM MODEL....', formModel);
//NOTIFY DESKTOP PARENT COMPONENT OF HERO MEDIA FEATURE FROM CMS...
this.NotifyFormSubmitted.emit(formModel);
};
CdfContactUsFormComponent.prototype.ResetForm = function () {
this.CreateForm();
};
CdfContactUsFormComponent.prototype.CreateForm = function () {
this.contactUsForm = this.formBuilder.group({
name: ['', forms_1.Validators.required],
emailAddress: ['', [forms_1.Validators.required, index_1.EmailValidator.email]],
message: ['', forms_1.Validators.required]
});
};
return CdfContactUsFormComponent;
}());
__decorate([
core_1.Output(),
__metadata("design:type", Object)
], CdfContactUsFormComponent.prototype, "NotifyFormSubmitted", void 0);
CdfContactUsFormComponent = __decorate([
core_1.Component({
selector: 'cdf-contact-us-form',
template: "\t\n\t<form [formGroup]=\"contactUsForm\" (ngSubmit)=\"onFormSubmit($event)\" novalidate autocomplete=\"off\">\n\t\t<!--NAME-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Name</label>\n\t\t\t\t\t<input type=\"text\" formControlName=\"name\"/>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.name.valid || contactUsForm.controls.name.pristine\" class=\"form-element__error\">\n\t\t\t\t\t\tname is required\n\t\t\t\t\t</div>\t\t\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\n\t\t<!--EMAIL ADDRESS-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Email Address</label>\n\t\t\t\t\t<input type=\"email\" formControlName=\"emailAddress\"/>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.emailAddress.valid || contactUsForm.controls.emailAddress.pristine || !contactUsForm.controls.emailAddress.errors.required\" class=\"form-element__error\">\n\t\t\t\t\t\temail address is required\n\t\t\t\t\t</div>\t\t\t\t\t\t\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.emailAddress.valid || contactUsForm.controls.emailAddress.pristine || !contactUsForm.controls.emailAddress.errors.email\" class=\"form-element__error\">\n\t\t\t\t\t\tinvalid email address\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\t\t\t\t\n\t\t</section>\n\n\t\t<!--MESSAGE-->\n\t\t<section class=\"row\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<div floatLabel class=\"form-element\">\n\t\t\t\t\t<label>Message:</label>\n\t\t\t\t\t<textarea formControlName=\"message\"></textarea>\n\t\t\t\t\t<div [hidden]=\"contactUsForm.controls.message.valid || contactUsForm.controls.message.pristine\" class=\"form-element__error\">\n\t\t\t\t\t\tmessage is required\n\t\t\t\t\t</div>\t\t\t\t\t\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</section>\n\n\t\t<!--BUTTON-->\n\t\t<section class=\"row align-center\">\n\t\t\t<div class=\"column\">\n\t\t\t\t<button type=\"submit\" class=\"button large radius\" [disabled]=\"!contactUsForm.valid\">Send Your Message</button>\n\t\t\t</div>\n\t\t</section>\n\t</form>\t\n\t",
styles: [
"\t\t\nform {\n margin: 0;\n width: 100%\n}\n\nform input,\nform select,\nform textarea {\n background-color: transparent;\n border: 0;\n -moz-border-radius: 0;\n -webkit-border-radius: 0;\n border-radius: 0;\n box-sizing: border-box;\n color: #262626;\n display: block;\n font-size: 1.25rem;\n height: 2.3125rem;\n margin: 0;\n padding: 0 .5rem;\n transition: border-color .15s ease-in-out 0s, box-shadow .15s ease-in-out 0s;\n width: 100%\n}\n\nform input:focus,\nform input:hover,\nform select:focus,\nform select:hover,\nform textarea:focus,\nform textarea:hover {\n border: 0;\n outline: 0\n}\n\nform .form-element__error {\n color: #B5121B;\n padding: 0 .75rem\n}\n\n.ng-valid[required] {\n border-left: 5px solid #598920\n}\n\nform input.ng-dirty.ng-invalid,\nform select.ng-dirty.ng-invalid,\nform textarea.ng-dirty.ng-invalid {\n border-left: 5px solid #B5121B\n}\n\n.floatLabelContainer {\n width: 100%;\n height: 70px;\n margin: 0 0 40px;\n background: #fff;\n box-sizing: border-box;\n border: 1px solid rgba(42, 42, 42, .3);\n border-radius: .325rem;\n position: relative\n}\n\n.floatLabelContainer__textarea {\n height: 280px\n}\n\n.floatLabelContainer.animate label {\n -webkit-transition: all .9s ease;\n transition: all .9s ease\n}\n\n.floatLabelContainer__label {\n box-sizing: border-box;\n color: #AFAFAF;\n font-size: 12px;\n font-weight: 400;\n height: 100%;\n line-height: 70px;\n opacity: 1;\n padding: 0 20px;\n pointer-events: none;\n position: absolute;\n -webkit-transform: translate3d(0, 0, 0);\n transform: translate3d(0, 0, 0);\n width: 100%\n}\n\n.floatLabelContainer__input {\n -webkit-appearance: none!important;\n -moz-appearance: none!important;\n appearance: none!important;\n background: 0 0!important;\n box-sizing: border-box;\n color: #262626!important;\n height: 100%!important;\n margin: 0!important;\n outline: 0!important;\n padding: 10px 20px 0!important;\n width: 100%!important\n}\n\n.floatLabelContainer__input::selection {\n color: #fff;\n background-color: #2a8dea\n}\n\n.floatLabelContainer--focused,\n.floatLabelContainer__input:focus {\n border-color: #2a8dea\n}\n\n.floatLabelContainer--focused .floatLabelContainer__label {\n color: #2a8dea;\n transform: translate3d(0, -20px, 0)\n}\n\n.floatLabelContainer--hasValue .floatLabelContainer__label {\n transform: translate3d(0, -20px, 0)\n}\n\n.floatLabelContainer>textarea {\n padding: 30px 20px 0!important\n}\t\n\t\t"
],
providers: []
}),
__metadata("design:paramtypes", [forms_1.FormBuilder])
], CdfContactUsFormComponent);
exports.CdfContactUsFormComponent = CdfContactUsFormComponent;
//# sourceMappingURL=cdf-contact-us-form.component.js.map