I’m trying to log variable which is the model of inputbox, but it says undefined, here is the coffeescript code.
.controller('setupCtrl',[
'$scope'
($scope) ->
$scope.userAge = [{age: ''}]
console.log 2342424
$scope.addAge = ->
console.log($scope.age)
])
This is the HTML code
<form role="ageForm" data-ng-submit="addAge()" >
<div class="form-group">
<input type="text" ng-model="age" class="form-control" placeholder="Age" required>
</div>
{{input}} butona koyup data-ng-click dene istersen
<button type="submit" ng-click="addAge()">sdsadsdSave</button>
</form>
It says undefined for $scope.age
It looks like ng-model => userAge.age not age only
<form role="ageForm" data-ng-submit="addAge()" >
<div class="form-group">
<input type="text" ng-model="userAge.age" class="form-control" placeholder="Age" required>
</div>
{{input}} butona koyup data-ng-click dene istersen
<button type="submit" ng-click="addAge()">sdsadsdSave</button>
</form>
$scope.addAge = ->
console.log($scope.userAge.age)
Related
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
I am working on SPA and I include HTML pages into one basic page by ng-include.Let's call this basic page as external and the included pages as internal.In an internal page I have set an input attribute to be ng-model="userd.Username" and in the external page i would like to get the value of this input.
In some internal page register.html there is the following code:
<div class="form-group">
<div class="form-group">
<span class="regForm text-danger">*</span> <input
ng-model="userd.Username" type="text" maxlength="10"
placeholder="Enter your name" class="form-control input-md"
required />
</div>
<div class="form-group">
<span class="regForm text-danger">*</span> <input
ng-model="userd.Password" type="password" maxlength="8"
placeholder="Enter your password" class="form-control input-md"
required />
</div>
<div class="form-group">
<span class="regForm text-danger">*</span><input
ng-model="userd.Nickname" type="text" maxlength="20"
placeholder="Enter your nickname" class="form-control input-md"
required />
</div>
<div class="form-group">
<input ng-model="userd.Description" type="text" maxlength="50"
placeholder="Enter description about you"
class="form-control input-md" />
</div>
<div class="form-group">
<input ng-model="userd.Photo" type="text"
placeholder="Enter photo URL" class="form-control input-md" />
</div>
<div class="form-group">
<button ng-click="registerBtn()" class="btn btn-primary">Register</button>
</div>
</div>
In the external page:
<div ng-include="'register.html'" ng-controller="registerCon" ng-show="logreg"></div>
I've tried to use the $rootscope as following in the main controller of the external page:
var appvar = angular.module('myApp', []);
//The Main Controller of the page (single web page)
appvar.controller('myCtrl',['$scope','$http','$rootScope',function($scope, $http,$rootScope) {
$rootScope.storedsession="";
}]);
And in the controller 'registerCon' I wrote:
appvar.controller('registerCon',['$scope','$http','$rootScope',function($scope, $http, $rootScope) {
$scope.registerBtn = function() {
console.log(this.userd);
$http.post("http://localhost:8080/ExampleServletv3/registeruser",this.userd)
.success(function(response) {
console.log(response);
setTimeout(function () {
$scope.$apply(function(){
$rootScope.storedsession=this.userd.Username;
console.log($rootScope.storedsession);
});
});
});
};
}]);
but it prints undefined for console.log($rootScope.storedsession); in the console,I also tried $scope instead of $rootScope but it didn't work too.
Can someone help me please?
Thanks
I am trying to do form validation using AngularJS in Laravel Blade, but it isn't working and when clicked on the submit button undefined gets printed in the console.
HTML:
<div class="uk-grid" ng-app="validationApp" ng-controller="mainController">
<form name="signupForm" class="uk-form uk-width-1-2" novalidate>
{{ csrf_field() }}
<fieldset class="pad50">
<div class="uk-form-row">
<input class="bradius2" placeholder="Username" type="text" name="username" ng-modal="user.username" required>
<div ng-show="signupForm.$submitted || signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required">Username is required.</span>
</div>
</div>
<div class="uk-form-row">
<input class="bradius2" placeholder="Email" type="email" name="user_mail" ng-modal="user.user_mail" required>
<div ng-show="signupForm.$submitted || signupForm.user_mail.$touched">
<span ng-show="signupForm.user_mail.$error.required">Email is required.</span>
<span ng-show="signupForm.user_mail.$error.email">Enter a valid email.</span>
</div>
</div>
<div class="uk-form-row">
<input class="bradius2" placeholder="Password" type="password" name="user_pass" ng-modal="user.user_pass" required>
<div ng-show="signupForm.$submitted || signupForm.user_pass.$touched">
<span ng-show="signupForm.user_pass.$error.required">Password is required</span>
</div>
</div>
<div class="uk-form-row">
<input class="bradius2" placeholder="Confirm Password" type="password" name="user_cpass" ng-modal="user.user_cpass" required>
<div ng-show="signupForm.$submitted || signupForm.user_cpass.$touched">
<span ng-show="signupForm.user_cpass.$error.required">Confirm the password</span>
</div>
</div>
<div class="uk-form-row">
<button class="uk-button bgorange butn uk-button-large" type="submit" id="sign_up_button" ng-click="signupUser(user)">
<b>SIGN UP VIA EMAIL</b>
</button>
</div>
</fieldset>
</form>
</div>
app.js:
angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
$scope.master = {};
$scope.signupUser = function(user) {
$scope.master = angular.copy(user);
console.log(user);
};
}]);
I am using Angular version 1.6.1 and also UIKit.
Thanks in advance!
It has to be ng-model instead of ng-modal.
ng-model is the one which stores the user input in form.
undefined gets printed in the console
you need to initialize the user object
angular.module('validationApp', [])
.controller('mainController', ['$scope', function($scope) {
$scope.master = {};
$scope.user = {};// here
$scope.signupUser = function(user) {
$scope.master = angular.copy(user);
console.log(user);
};
}]);
Form Validation not working AngularJS
You should add this code on your form tag
ng-submit="mainForm.$valid && yourfunction()" //yourfunction means which event you want to be fire
notice ng-messages:
<div class="uk-form-row" >
<input class="bradius2" placeholder="Username" type="text" name="username" ng-model="user.username" required>
<div ng-messages="signupForm.username.$error" ng-show="signupForm.$submitted || signupForm.username.$touched">
<span ng-show="signupForm.username.$error.required">Username is required.</span>
</div>
</div>
I have a form within my angular app (within SharePoint) that uses routing via hashbang, but when I click on a button in my form, it redirects to the root (like it can't resolve the URL so it uses the otherwise setting in my config), instead of executing the function.
Here is the HTML (my controller is defined in the routing):
<form name="newItem" class="form-horizontal" data-ng-submit="createItem()">
<fieldset>
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
({{70 - newItem.title.$viewValue.length}} Characters Remaining)
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
Your summary will be displayed as follows ({{500 - newItem.body.$viewValue.length}} Characters Remaining):<br /> {{itembody}}
</div>
</div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" data-ng-click="newItem">Submit</button>
</div>
</div>
</fieldset>
</form>
Here is my controller:
appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {
var itemEntry = new appItems;
console.log(itemEntry);
$scope.types = [];
appTypes.query(function (typedata) {
var itemTypes = typedata.value;
// Foreach type, push values into types array
angular.forEach(itemTypes, function (typevalue, typekey) {
$scope.types.push({
label: typevalue.Title,
value: typevalue.Title,
});
})
});
$scope.createItem = function () {
itemEntry.Title = $scope.itemtitle;
itemEntry.$save();
}
$scope.cancel = function () {
}
}]);
UPDATE: It appears that this is related to SharePoint (My Angular Form is in SharePoint), as even setting the button type to submit as follows triggers the refresh instead of running the function. SharePoint is wrapping everything in a form since it inherits from the Master page of the Web, so when I added two "Angular Forms" to the page, the first angular form was closing the tag on the SharePoint form so the second was able to work. Does anyone have a stable workaround (beyond creating a custom masterpage). Image as follows:
I solved it by closing the tag of SharePoint instead of creating a custom masterpage. Ex:
<!-- Close the default form tag put in place by SharePoint instead of creating a custom Masterpage without this element that requires increased permissions and complexity to deploy. Without this tag closed, the form below will not render properly -->
</form>
<div>
<form id="newItemForm" class="form-horizontal" data-ng-submit="createItem()">
<div class="form-group">
<label class="col-lg-2 control-label" for="itemtype">Type *</label>
<div class="col-lg-10">
<select class="form-control" id="itemtype" data-ng-model="selectedType"
data-ng-options="opt as opt.label for opt in types" required>
<option style="display:none" value="">Select a type</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="title">Title *</label>
<div class="col-lg-10">
<input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="body">Body *</label>
<div class="col-lg-10">
<textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
</div>
</div>
<div class="col-lg-10 col-lg-offset-2">
<!--<button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>-->
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
Add type='button' to the buttons. I had this same problem before and assumed it was an angular bug of some kind.
Do both buttons exhibit this behavior or just the Submit button?
The submit button calls newItem from ng-click, but the name of the function in the js is actually createItem.
I have a code that should disable a button when : registerForm.$invalid || form.password != form.passwordBis, which should mean : "Disable the button if the form isn't valid OR if the '$scope.form.password' variable isn't equal to '$scope.form.passwordBis'.", isn't it?
So here I have a code that activate the button if the two passwords matches. Which shouldn't happen, because the first condition is still wrong !
HTML :
<div ng-app="app" ng-controller="formCtrl">
<form name="registerForm">
<div class="header">
<h2>Create your account</h2>
</div>
<div class="form-group">
<div class="title">First Name</div>
<input type="text" name="firstName" ng-required class="form-control" ng-class="{empty:form.firstName.length==0}" ng-model="form.firstName" required></input>
</div>
<div class="form-group">
<div class="title">Last Name</div>
<input type="text" name="lastName" ng-required class="form-control" ng-class="{empty:form.lastName.length==0}" ng-model="form.lastName" required></input>
</div>
<div class="form-group">
<div class="title">Email</div>
<input type="email" name="email" ng-required class="form-control" ng-class="{empty:form.email.length==0}" ng-model="form.email" required></input>
</div>
<div class="form-group">
<div class="title">Password</div>
<input type="password" name="password" class="form-control" ng-class="{empty:form.password.length==0}" ng-model="form.password" required></input>
<input type="password" name="passwordBis" class="form-control" ng-class="{empty:form.passwordBis.length==0}" ng-model="form.passwordBis" minlength="6" required></input>
</div>
<div ng-if="form.password != form.passwordBis" class="error">Passwords doesn't match.</div>
<div class="form-group">
<button class="btn btn-success" ng-click="register()" ng-disabled="registerForm.$invalid || form.password != form.passwordBis">Register</button><br/>
</div>
</form>
</div>
JS :
var app = angular.module("app", []);
app.controller("formCtrl", function($scope) {
$scope.form = {
firstName: "",
lastName: "",
email: "",
password: "",
passwordBis: ""
};
});
And you can test it : JSFiddle
What am I missing ?
Remove ng-required attributes from your form elements.
For form elements you should use either ng-required or required, but not both at the same time. ng-required expects an expression that needs to evaluate to true in order to mark a form element as required, whereas required doesn't need any value. See https://stackoverflow.com/a/16648851/1237995 for more detailed explanation.