AngularJS Form controller from directive - angularjs

I am trying to submit a simple contact form. The form is inside a bootstrap modal (don't think that makes any difference) but the controller is in a directive.
The html for the form is as followed:
<form name="contactForm" ng-submit="contactForm()" novalidate>
<div class="form-group">
<div class="col-lg-6 col-md-6 col-sm-6">
<input type="text" placeholder="Full name" name="name" ng-minlength="3" max="20"
ng-model="name" id="name" class="form-control">
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<input type="email" ng-minlength="4" placeholder="Email address" name="contactEmail"
ng-model="email" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 col-md-12 col-sm-12">
<input type="text" ng-model="subject" name="subject" ng-minlength="10" id=""
placeholder="Subject" class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-lg-12 col-md-12 col-sm-12">
<textarea class="form-control" ng-model="message" name="message" ng-minlength="10"
placeholder="Your message"></textarea>
</div>
</div>
<div class="modal-footer">
<div class="col-lg-12 col-md-12 col-sm-12">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</div>
</form>
Which i think is all good. The body of my controller looks like this
$rootScope.contactForm = contactForm();
function contactForm() {
console.log('triggered!');
var contactFormVars = {
name: $rootScope.name,
contactEmail: $rootScope.contactEmail,
subject: $rootScope.subject,
message: $rootScope.message
}
// With Promise
Stamplay.Object('contactform')
.save(contactFormVars)
.then(function(res) {
console.log('yes!');
}, function(err) {
console.log('No!');
})
}
return directive;
};
EDIT: Controller now looks like this:
function contactForm($rootScope,$stamplay,$q) {
$rootScope.data = {}
$rootScope.data = {
name: $rootScope.data.name,
contactemail: $rootScope.data.contactemail,
subject: $rootScope.data.subject,
message: $rootScope.data.message
}
Stamplay.Object("contactform")
.save($rootScope.data, function (err, res) {
console.log(res);
console.log(err);
// res is the new car object
});
}
When i click the submit button I get the following error which i've been Googling
Error: v2.contactForm is not a function. (In 'v2.contactForm()', 'v2.contactForm' is an instance of FormController)
fn
Any help with this is appreciated.
EDIT
Ok so now i've moved the js from a directive and placed it in to the main controller. At the moment its not making any difference, only that the error has changed very slightly:
angular.js:12722Error: v4.contactForm is not a function. (In 'v4.contactForm(ensureSafeObject(v5,text))', 'v4.contactForm' is an instance of FormController)
fn
Not sure what the difference between v2 and v4 is.
Any advice to get past this blocker is appreciated.

Related

AngularJS UI-Bootstrap Modal Dialog gets covered by main.html

How can I use bootstrap modal dialogs with AngularJS using ui-bootstrap with angular-ui-router? I am new to AngularJS and tried searching the documentation without luck.
I have used this code but the contents behind gets covered:
my main.html :
<form class="navbar-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<img src="img/dsd.png" style="width: 17px">
</button>
</span>
</div>
<a class="btn btn-success" ui-sref="app.login">Login</a>
<a class="btn btn-danger" ui-sref="app.register">Regiter</a>
</form>
my app.js:
angular.module("myApp",["ngAnimate","ngSanitize","ui.router","ui.bootstrap","mds"])
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("app",{
url:"/app",
views:{
main:{
templateUrl:"templates/main.html",
controller:"appCtrl"
}
}
})
.state("app.register",{
url:"/register",
views:{
sub:{
templateUrl:"templates/register.html",
controller:"registerCtrl"
}
}
})
my modal:
<div id="y" class="modal-dialog">
<div>
<div class="modal-content">
<div class="modal-header btn-danger">
x
SignUp
</div>
<div class="modal-body">
<form ng-submit="register()">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control" ng-model="Name" required>
</div>
<div class="form-group">
<label>User Name</label>
<input type="text" class="form-control" ng-model="UserName" required>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="tel" class="form-control" ng-model="Phone" required>
</div>
<div class="form-group">
<label>Full Address</label>
<textarea class="form-control" ng-model="addr" required></textarea>
</div>
<div class="form-group">
<label>Email address:</label>
<input type="email" class="form-control" ng-model="Email" required>
</div>
<div class="form-group">
<label>Password:</label>
<input type="password" class="form-control" ng-model="Pwd" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
Sudan Store.
</div>
</div>
</div>
</div>
One approach is to use the appendTo option:
From the Docs:
$uibModal's open function
options parameter
appendTo (Type: angular.element, Default: body: Example: $document.find('aside').eq(0)) - Appends the modal to a specific element.
Use the appendTo option to append to an element that will be fully visible.
For more information, see
UI-Bootstap modal Directive API Reference

How to get data from html form and save in database(with button) using angularJS?

I want to get data from input boxes and save it in a database with a click on the button. I'm using angular. How can I get this data from my form? Please help me.
I have this HTML code:
<form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: console.log($scope.usernamee),
password: console.log($scope.passwordd),
name: console.log($scope.namee),
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}
<form ng-submit="createUser(userForm)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="user.usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="user.passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="user.namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Add user</button>
</form>
angularjs code
$scope.user={}//declare user object
$scope.createUser=function(userForm)
{
console.log($scope.user);
//for saving data in database, you'll need an API along with the backend.
}
I'm thinking in my application is using "Sequelize" method. Is it possible this method to do this connection with database ?

how to close modal after submit in angularjs

i know have many result in this question but no one give work answer for me.
html 1:
<button class="basebtn logbtn" ng-click="openlog()">LOGIN</button>
<button class="basebtn regbtn" ng-click="openreg()">SIGN UP</button>
html 2:
<div ng-controller="main">
<center><img class="img-login" ng-src="../images/form-logo.png"/></center>
<form class="login" name="log" ng-submit="login()" novalidate>
<div class="form-group login-form" ng-class="{'has-error' : isInvalid(log.email) ,'has-success' : isValid(log.email)}">
<input type="email" class="form-control" name="email" ng-model="user.email" required placeholder="Email">
<div class="alert alert-danger" role="alert" ng-show="isInvalid(log.email)">Enter valid email</div>
</div>
<div class="form-group login-form" ng-class="{'has-error' : isInvalid(log.password) ,'has-success' : isValid(log.password)}">
<input type="password" class="form-control" name="password" ng-model="user.password" required placeholder="Password">
<div class="alert alert-danger" role="alert" ng-show="isInvalid(log.password)">This Feild is required</div>
</div>
<div class="form-group" style="text-align:center;">
<input type="submit" class="logbnt" value="LOGIN" ng-disabled="! log.$valid" data-dismiss='modal'/>
</div>
</form>
angular :
$scope.login = function(){
$http.post("www.example.com/login",$scope.user).then(function(res){
localStorage.setItem("token",res.data.token);
//how i close the modal ???
});
}
//here create the modal
$scope.openlog = function () {
$scope.$modalInstance = $uibModal.open({
templateUrl:"login.html",
});
}
that my code , how i close in $http result the modal ?
You can do this,
$scope.login = function(){
$http.post("www.example.com/login",$scope.user).then(function(res){
localStorage.setItem("token",res.data.token);
$modalInstance.dismiss('cancel');
});
};

Angular and Bootstrap radio buttons conflict When Editing Form

I am unable to get automatic radio button checked when I edit the User From using following Html and AngularJs Code. When I console {{changeUser}} this returns following data
{"id":1,"username":"Ramesh","password":"Ramesh1#23","role":"admin","active":"no"}. When I load the edit form I have to automatically checked the no radio button in the following code.
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form class="form-horizontal form-bordered" name="editUserForm" data-ng-submit="userEdit(changeUser)">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username*</label>
<div class="col-md-4">
<input class="form-control" type="text" name="userName" data-ng-model="changeUser.username" value="{{ changeUser.username }}" data-ng-pattern="/^[a-z0-9_ .-]{5,15}$/i" required />
<span style="color:red" class="error" data-ng-show="editUserForm.userName.$error.pattern" >Only letters, integers, and underscores.Minimum 5 characters to maximum 15 characters.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password*</label>
<div class="col-md-4">
<input class="form-control" type="password" name="changePassword" data-ng-model="changeUser.password" value="{{ changeUser.password}}" data-ng-pattern="usersPattern.password" required />
<span style="color:red" class="error" data-ng-show="editUserForm.changePassword.$error.pattern">Minimum of 8 characters, 1 capital letter,1 lowercase, 1 special-case and 1 numeric.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn purple" data-ng-disabled= "editUserForm.$invalid">
<i class="fa fa-check"></i> Edit</button>
<button type="button" class="btn red" data-ng-click="cancelEdit()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
The Controller is
(function (){
"use strict";
function UsersEditController($scope, UserFactory, $http, $location) {
$scope.$on('$viewContentLoaded', function () {
App.initAjax(); // initialize core components
});
$scope.changeUser = {};
$scope.changeUser = UserFactory.get();
$scope.userEdit = function(data) {
$scope.changeUser = data;
console.log($scope.changeUser);
};
$scope.usersPattern = {
password: '((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%]).{8,20})'
};
$scope.cancelEdit = function() {
$location.path('users');
};
}
UsersEditController.$inject = ['$scope', 'UserFactory', '$http', '$location'];
angular.module('books').controller('UsersEditController', UsersEditController);
})()
And I guess this is your answer (even without js code provided :) )
https://stackoverflow.com/a/18446612/552194
You need to add ng-value and use it instead of the standard value

Loading a modal form with data in Angular

Trying to learn Angular ... and
I'm missing something really obvious here, I'm sure of it. However, all of the examples, fiddles or plunkers I'm finding deal with validating create forms, not update forms.
My application is creating a modal form to add/edit client data. If a valid clientId is passed in, the form is opened as an edit and the data is loaded into the form.
When I load the values, I'm only assigning the value to the modal's property. Since its only a value, it doesn't have an $invalid function or any of the other nice form methods. Without that, the validation doesn't work. What's the proper way to load data into a form in Angular so that it can be validated? Thanks!
angular.module('app').controller("clientController",
function ($scope, $modalInstance, dataService, clientId) {
$scope.clientForm = {}
$scope.clientForm.clientId = clientId;
$modalInstance.opened.then(function () {
if (clientId > 0) {
dataService.getClient(clientId).then(function (clientData) {
$scope.clientForm.name = clientData.Name;
$scope.clientForm.address1 = clientData.Address1;
$scope.clientForm.address2 = clientData.Address2;
$scope.clientForm.city = clientData.City;
$scope.clientForm.stateId = clientData.StateId;
$scope.clientForm.zip = clientData.Zip;
$scope.clientForm.email = clientData.Email;
});
};
});
$scope.ok = function () {
$scope.clientForm.$submitted = true;
if ($scope.clientForm.$valid) {
$modalInstance.close($scope.clientForm);
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
)
And for the form:
<script type="text/ng-template" id="ClientEdit.html">
<div class="modal-header">
<h3 class="modal-title"><span>Client</span></h3>
</div>
<div class="modal-body col-md-12">
<form name="clientForm" novalidate>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right" for="txtclientName">Name: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtclientName" type="text" ng-model="clientForm.name" required /></div>
<p ng-show="clientForm.name.$invalid">Name is required.</p>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right" for="txtAddressLine1">Address 1: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtAddressLine1" type="text" ng-model="clientForm.address1" /></div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right" for="txtAddressLine2">Address 2: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtAddressLine2" type="text" ng-model="clientForm.address2" /></div>.
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right" for="txtCity">City: </label>
<div class="col-md-2"><input class="form-control input-sm" id="txtCity" type="text" ng-model="clientForm.city" /></div>
<label class="col-md-1 control-label text-right" for="txtZip">Zip: </label>
<div class="col-md-2"><input class="form-control input-sm" id="txtZip" type="text" ng-model="clientForm.zip" /></div>
</div>
<div class="form-group col-md-12">
<label class="col-md-2 control-label text-right" for="txtEmail">Email: </label>
<div class="col-md-6"><input class="form-control input-sm" id="txtEmail" type="email" ng-model="clientForm.email" /></div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()" ng-disabled="clientForm.$invalid">Save</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>

Resources