I'm trying to create a edit profile section in angularjs. For that i create in my users controller a section to make a rest api call to get info to inject on the page and later i will do the parte of changePassword also.
At the moment i'm getting the error "Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined" and I cant undestand why.
editAccount view:
<div class="row" ng-controller="UsersSettingsController as usersSettingsCtrl" >
{{userInfo}}
<!-- edit form column -->
<div class="col-md-9 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Organization:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.organization_name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Permission Group:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.permission_group_name}}" readonly>
</div>
</div>
<div class="form-group" nf-ig="user.organization_permission_group_id=='df0417e3-ce36-41ca-9f13-f58c1a3a96f5'">
<label class="col-lg-3 control-label">Root:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.data.root}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<hr>
<h4>Change Password</h4>
<br>
<form name="newPasswordForm" role="form" ng-submit="newPasswordForm.$valid && ok()" novalidate>
<div class="form-group">
<label class="col-md-3 control-label">Change Password:</label>
<div class="col-md-8">
<input type="password" name="newPassword" ng-model="password.new"
ng-minlength="6" required />
<span class="help-block"
ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
Please enter a new password, it must be at least 6 characters long.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input type="password" name="newPasswordConfirm"
ng-model="password.confirm" ng-minlength="6"
value-matches="password.new" required />
<span class="help-block"
ng-show="newPasswordForm.newPasswordConfirm.$dirty && newPasswordForm.newPasswordConfirm.$invalid">
Please enter the same password again to confirm.
</span>
</div>
</div>
</form>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" style="float:right" value="Save Changes">
<div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
</div>
</div>
</form>
</div>
</div>
usersController:
app.controller('UsersSettingsController',['$scope', 'user', function ($scope, user) {
$http.get('/api/users/userInfo/'+user.id).success(function (data) {
console.log("user info ",data);
$scope.userInfo = data;
});
//changePassword call to rest api
}]);
usersDirective:
(function() {
var app = angular.module('userSettings', []);
app.directive('valueMatches', ['$parse', function ($parse) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var originalModel = $parse(attrs.valueMatches),
secondModel = $parse(attrs.ngModel);
// Watch for changes to this input
scope.$watch(attrs.ngModel, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
});
// Watch for changes to the value-matches model's value
scope.$watch(attrs.valueMatches, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
});
}
};
}]);
})();
Related
I have successfully integrated dropzone with my form using jquery. However, I have an issue with validation of the other form inputs. It seems the other form inputs do not respect the validation such as "required". I also tried using parsley for validation but does not work. when I remove the dropzone field, the validation works well.
Here is the form.
<form class="form-vertical"
id="createPropertyForm"
enctype="multipart/form-data"
method="POST"
>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Country</label>
<div class="inputGroupContainer">
<input id="country"
name="country" placeholder="Country" class="form-control" required
value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">County</label>
<div
class="inputGroupContainer">
<input id="county"
name="county" placeholder="County" class="form-control" required value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Town</label>
<div class=" inputGroupContainer">
<input id="town" name="town"
placeholder="Town" class="form-control" required value="" type="text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Postcode</label>
<div class="inputGroupContainer">
<input id="postcode"
name="postcode" placeholder="Postcode" class="form-control" required
value=""
type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Description</label>
<div class=" inputGroupContainer">
<textarea id="description"
name="description" placeholder="Description" class="form-control"
required="true" value="" type="text"></textarea>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Address</label>
<div class="inputGroupContainer">
<input id="address" name="address"
placeholder="Address" class="form-control" required value="" type="text">
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Bedrooms</label>
<div class=" inputGroupContainer">
<select class=" form-control"
name="bedrooms" id="bedrooms" required>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label
">Bathrooms</label>
<div class=" inputGroupContainer">
<select
class="selectpicker bathrooms form-control" name="bathrooms"
id="bathrooms"
required>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Price</label>
<div class="inputGroupContainer">
<input id="price" name="price"
placeholder="Price" class="form-control" required value="" type="number">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Property Type</label>
<div class=" inputGroupContainer">
<select
class="selectpicker form-control" name="propertyType" id="propertyType">
<option
value="">Choose type</option>
<?php
foreach
($propertyTypes as $propertyType) {
?>
<option value="<?=
$propertyType->id ?>"><?= $propertyType->title ?></option>
<?php
}
?>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 col-sm-12" >
<div class="col-md-6">
<div class="form-group">
<label class=" control-
label">Type</label>
<div class="col-md-12">
<div class="col-md-6 ">
<label><input type="radio"
name="type" class="form-control type" required>Sale</label>
</div>
<div class="col-md-6">
<label><input type="radio"
name="type" class="form-control type" required>Rent</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-
label">Upload Image</label>
<div class=" inputGroupContainer">
<div class="dropzone"
id="create-dropzone" >
<div class="fallback">
<input name="file"
type="file" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="dropzone-previews"></div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<button class="btn btn-success btn-lg"
type="submit" id="submitCreateForm"> Submit </button>
</div>
</form>.
Here is the jquery code:
// Parsley for form validation
$('#createPropertyForm').parsley();
$('#editPropertyForm').parsley();
Dropzone.options.createDropzone = {
url: `${baseUrl}administrator/properties`,
autoProcessQueue: false,
parallelUploads: 1,
maxFiles: 1,
maxFileSize:2048,
uploadMultiple: false,
acceptedFiles: "image/*",
init: function () {
var submitButton = document.querySelector("#submitCreateForm");
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
e.preventDefault();
if (wrapperThis.files.length) {
wrapperThis.processQueue();
} else {
wrapperThis.submit();
}
});
this.on("addedfile", function (file) {
var removeButton = Dropzone.createElement("<button class='btn btn-block btn-danger'><i class='fa-times fa'></button>");
removeButton.addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
this.on('sending', function (data, xhr, formData) {
formData.append("country", $("#country").val());
formData.append("county", $("#county").val());
formData.append("town", $("#town").val());
formData.append("postcode", $("#postcode").val());
formData.append("description", $("#description").val());
formData.append("address", $("#address").val());
formData.append("bathrooms", $("#bathrooms").val());
formData.append("price", $("#price").val());
formData.append("bedrooms", $("#bedrooms").val());
formData.append("propertyTypeId", $("#propertyType").val());
formData.append("type", $(".type").val());
});
this.on('success', function (files, response) {
toastr.success(response.message);
setTimeout(function () {
location.reload();
}, 1000);
});
this.on('error', function (file, error, xhr) {
file.status = 'queued';
if (xhr.status === 422){
toastr.error('An error occurred, please confirm that you have filled all inputs and try again');
}else{
toastr.error('An error occurred');
}
});
this.on("maxfilesexceeded", function(file) {
wrapperThis.removeFile(file);
});
}
};
Here I am trying to insert data from form attendance-form.blade.php in table attendance on button click using angularJS.
Now the problem when I click button data is not inserted in table instead it gives
Argument 'AttendanceFormController' is not a function, got undefined.
Below are my form and AttendanceController.js.
In attendance-form.blade.php
<div ui-view="attendanceForm">
<div class="mdl-grid demo-content" ng-controller='AttendanceFormController'>
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<form>
<div class="form-group label-static is-empty">
<h3>Create Attendance</h3>
<div class="form-group label-static is-empty">
<input type="text" name="user_id" class="signup form-control"
id="i2" placeholder="user_id" ng-model="attendance.user_id">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="in_or_out" class="signup form-control"
id="i2" placeholder="in_or_out" ng-model="attendance.in_or_out">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="comment" class="signup form-control"
id="i2" placeholder="comment" ng-model="attendance.comment">
</div>
<div class="signup form-group label-static is-empty ripple-container signup">
<input type="button" value="Create Attendance" class="btn btn-raised btn-primary" ng-click="createattendance()">
</div>
</div>
</form>
</div>
</div>
</div>
In AttendanceController.js
app.controller('AttendanceFormController', function ($scope, AttendanceService) {
$scope.attendance = {};
$scope.attendance.user_id;
$scope.attendance.in_or_out;
$scope.attendance.comment;
$scope.loadAttendance = function () {
$scope.attendance = AttendanceService.get({id:$scope.params.id});
}
$scope.createattendance = function () {
attendance = {user_id:$scope.attendance.user_id,
in_or_out:$scope.attendance.in_or_out,
comment:$scope.attendance.comment
}
AttendanceService.post(attendance).then(function(response){
alert('User successfully added in the system.'+'\n'+'Check console.log for response.');
console.log(response.data);
});
}
});
I am trying to load data from a Service to a form but is not binding to the field value the data loaded from the service/server:
The data from service is coming OK, the problem is after setting here in this code, I load a route to my form but the form keeps with the old values, this code is in my controller:
$scope.cadastro = {
email: '',
name: 'the name to put in the field',
city: ''
};
$scope.editar = function () {
myAppServices.getUserData($rootScope.uid).then(function (data) {
if (data !== null) {
$scope.cadastro = data;
$scope.cadastro.name = data.name;
$location.path('cadastro');
}
});
};
the HTML form:
<form name="myDataForm" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-5 control-label no-padding-right" for="email">Email</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="Email" name="email" ng-model="cadastro.email" focus/>
<span ng-show="myDataForm.email.$error.email" class="help-inline">Email is not valid</span>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label no-padding-right" for="name">Nome Completo</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" name="name" class="form-control" placeholder="Nome" ng-model="cadastro.name" />
<small class="errorMessage" data-ng-show="myDataForm.name.$dirty && myDataForm.name.$error.required"> Informe seu nome completo.</small>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label no-padding-right" for="address">Cidade</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" placeholder="Cidade" ng-model="cadastro.city" />
</span>
</div>
</div>
<div class="form-group">
<span class="lbl col-sm-5"> </span>
<div class="col-sm-7">
<button type="submit" class="width-35 pull-right btn btn-sm btn-primary" ng-click="salvarcadastroForm(cadastro)" data-ng-disabled="myDataForm.$invalid">
<i class="fa fa-floppy-o"></i> Save
</button>
</div>
</div>
</form>
What should I do?
SOLUTION:
Load user data in a init method in the controller:
$scope.init = function () {
$scope.reset();
// if user logged then load data
if ($rootScope.uid !== undefined) {
myAppServices.getUserData($rootScope.uid).then(function (data) {
if (data !== null) {
$scope.formData = data;
}
});
}
};
hi i want to clear the form values after successfull completion. Houw should i implemnt
<div ng-controller="employeelistController as listControl">
<div class="container form-group" ng-controller="addEmployee as addemp">
<form name="frmEmployee" ng-submit="Add(addemp.employee) && frmEmpbloyee.$valid">
<div class="col-lg-4 ctrmain">
<div class="row">
<div class="col-lg-6">
<strong>Employee No</strong>
</div>
<div class="col-lg-6">
<input type="number" id="txtEmpId" ng-model="addemp.employee.employeeid" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>FirstName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtfirstName" ng-model="addemp.employee.firstname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>LastName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtlastName" ng-model="addemp.employee.lastname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>Department</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtDept" ng-model="addemp.employee.department" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>DOB</strong>
</div>
<div class="col-lg-6">
<input type="date" id="DTdob" ng-model="addemp.employee.dateofbirth" required class="form-control" />
</div>
</div>
<div class="row">
<input type="submit" id="btnSubmit" class="btn btn-primary value=" save" />
</div>
</div>
which is the best way to implement this. I have tried many ways. please help.
$scope.Add = function (emp,$scope) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
$scope.emp = null;
}
which is the best way to implement this. I have tried many ways. please help.
First of all you don't need $scope in the argument of the Add function.
$scope.Add = function (emp) {
this.EmployeeObject = angular.copy(emp);
employees.push(this.EmployeeObject);
this.employee=null;
$scope.$setPristine(true);
}
update it with the demo
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
$scope.empList = [];
$scope.addemp = {};
$scope.saveEmp = function(){
$scope.empList.push($scope.addemp);
$scope.reset();
};
$scope.reset = function() {
$scope.addemp = {};
$scope.form.$setPristine();
}
});
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<form name="form" id="form" novalidate ng-submit="saveEmp()">
<div class="row">
<div class="col-lg-6">
<strong>Employee No</strong>
</div>
<div class="col-lg-6">
<input type="number" id="txtEmpId" ng-model="addemp.employeeid" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>FirstName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtfirstName" ng-model="addemp.firstname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>LastName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtlastName" ng-model="addemp.lastname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>Department</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtDept" ng-model="addemp.department" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>DOB</strong>
</div>
<div class="col-lg-6">
<input type="date" id="DTdob" ng-model="addemp.dateofbirth" required class="form-control" />
</div>
</div>
<div class="row">
<button type="submit" ng-disabled="form.$invalid ">submit</button>
<button type="reset" ng-disabled="form.$pristine" ng-click="reset()">reset</button>
</div>
</form>
<p>form: {{addemp | json}}</p>
<p>empList: {{empList | json}}</p>
<p>Pristine: {{form.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre>
</p>
</div></div>
$scope.Add = function (emp) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
$scope.emp = {}; // initialize the form to empty object
$scope.frmEmployee.$setPristine(); // set it to as user has not interacted with the form.
}
I have cleared textbox with below code. e.g I have cleared FirstName textbox.
HTML SECTION
<td ng-show="a">
<input type="text" ng-model="e.FirstName" />
</td>
Controller SECTION
e.FirstName= "";
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
function resetform() {
document.getElementById("frmEmployee").reset();
}
$scope.Add = function (emp,$scope) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
resetform();
}
});
Its pure JavaScript with simple one line code.
document.getElementById('yourFormId').reset()
Add this syntax at the end of the function in controller after submitting the form.
Learning Angular by redoing an app I've built. I am trying to post some data from a collection of text boxes to my production api. When I click the submit button, I get no response. No flicker, no error message, nothing. I'm curious if I don't have my Angular wired up properly. If anyone could help me figure this one out, I'd greatly appreciate it.
MainController.js
(function () {
var app = angular.module("app", [])
app.controller('MainController', function($scope, $http) {
var onUpdatesComplete = function (response) {
$scope.updates = response.data;
};
$http.get("productionApiAddress")
.then(onUpdatesComplete);
$scope.demoInquiry = function(){
var data = $.param({
json: JSON.stringify({
firstName : $scope.firstName,
lastName : $scope.lastName,
companyName : $scope.companyName,
email : $scope.email,
phone : $scope.phone
})
});
$http.post("http://productionApiAddress", data).success(function() {
$.('#demoSuccessResult').removeClass('hidden');
})
};
});
}());
index.html
<html ng-app="app">
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/MainController.js"></script>
...
<body ng-controller="MainController">
...
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>First Name*</label>
<input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Last Name*</label>
<input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Company Name*</label>
<input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Your Work Email*</label>
<input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<label>Office Phone Number*</label>
<input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control"
style="background-color: #053A54; color: #ffffff;"
value="Submit For Trial"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12">
<p>* - required</p>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 hidden">
<span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
</div>
</div>
Please see below. You don't have to use jquery to show/hide dive elements ng-show hide will do this same work for you.
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope, $http) {
$scope.demoInquiry = function() {
var data = {
firstName: $scope.firstName,
lastName: $scope.lastName,
companyName: $scope.companyName,
email: $scope.email,
phone: $scope.phone
};
console.log(data);
$http.post("http://productionApiAddress", data).success(function() {
$scope.postSucess = true
}).error(function() {
$scope.postError = true;
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>First Name*</label>
<input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Last Name*</label>
<input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Company Name*</label>
<input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Your Work Email*</label>
<input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<label>Office Phone Number*</label>
<input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control" style="background-color: #053A54; color: #ffffff;" value="Submit For Trial" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12">
<p>* - required</p>
</div>
</div>
<div class="row" ng-show="postSucess">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
<span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
</div>
</div>
<div class="row" ng-show="postError">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
<span id="demoErrorResult" style="color: red;">Wooowa can't post </span>
</div>
</div>
</div>
</body>