i cannot find a problem here, why i cant see the value in the
HTML:
'<div ng-app="BusinessinfoModule" ng-controller="BusinessinfoController"
<label>Your Business Name</label>
<input type="text" class="form-control" name="bussiness" ng-model="bussiness" ng-maxlength="100" required>
</div>'
and the controller:
angular.module('BusinessinfoModule', [])
.controller('BusinessinfoController', function($scope) {
$scope.business = 'aaa';
});
Here the codepen: http://codepen.io/anon/pen/GJggeE
<div ng-app="BusinessinfoModule" ng-controller="BusinessinfoController" >
<label>Your Business Name</label>
<input type="text" class="form-control"
name="bussiness"
ng-model="business " //ng-model which binds your controller scope to ui.
ng-maxlength="100"
required/>
</div>
angular.module('BusinessinfoModule', [])
.controller('BusinessinfoController', function($scope) {
$scope.business = 'aaa';
});
https://jsfiddle.net/ncoxq6zf/
Related
I recently updated my Angular from 1.5.x to 1.6.4 and now, when I go to a form, I get the below error message whenever I try to type something up in the form/textbox:
TypeError: Attempted to assign to readonly property.
This is my controller:
mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http){
$scope.post = '';
$scope.postCreated = false;
$scope.makeNewPost = function() {
$http.post('/api/post', {
title: $scope.post.title,
})
.then(function(res){
$scope.postCreated = true;
//extra code not related to the form itself...
};
}]);
My HTML looks like this:
<form ng-submit="makeNewPost()">
<div class="form-group">
<label for="title" class="control-label">Title</label>
<input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
</div>
<input type="submit" value="Submit">
</form>
I looked this error up and everything I am seeing has nothing to do with what my set up is like.
Please help me out on this. I don't know where to go from here.
Thanks
Try this...
you have initialized $scope.post = ''; as a string. But that should be $scope.post = {}; an object.
var mainApp = angular.module('app', []);
mainApp.controller('newPostController', ['$scope', '$http', function($scope, $http) {
$scope.post = {};
$scope.postCreated = false;
$scope.makeNewPost = function() {
console.log($scope.post.title);
$http.post('/api/post', {
title: $scope.post.title,
})
.then(function(res) {
$scope.postCreated = true;
//extra code not related to the form itself...
});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app='app' ng-controller='newPostController'>
<form ng-submit="makeNewPost()">
<div class="form-group">
<label for="title" class="control-label">Title</label>
<input type="text" autocomplete="off" class="form-control" ng-model="post.title" id="title" required="required">
</div>
<input type="submit" value="Submit">
</form>
</div>
Please help me to check this part of code.
<body ng-app = "myApp">
<h1>FORM </h1>
<div ng-controller="myController">
<p><label>Username : </label><input type="text" ng-model="user.username" name="username" id="username" /></p>
<p><label>Email : </label><input type="email" ng-model="user.email"/></p>
<p><label>Verifikasi Email : </label><input type="email" ng-model="user.verify_email" /></p>
<p><label>Password : </label><input type="password" ng-model="user.password" id="password" /></p>
<button type="button" ng-click = "add()" >Sig In</button>
</div>
</body>
In my Javascript:
<script>
var app = angular.module('myApp', []);
app.controller("myController", function($scope){
$scope.user = {};
$scope.add = function(){
$scope.data = [
{ nama : $scope.user.username},
{ email : $scope.user.email},
{password : $scope.user.password } ];
console.log($scope.data);
}
});
Thanks for you all. I already update my script. When I click the button, the console didn't print the data. Why? I think there is something wrong.
You didn't define user
But that shouldn't be the problem if you use only user as model like
<input type="text" ng-model="user" name="username" id="username" />
It'll be added as property in the scope without any worries.
But you have added property username in user.
As user is undefined so the scenario will be undefined.username which is not permitted.
Try to defined user as object then any property will automically added.
Like this
$scope.user={};
in your HTML you should
<body ng-app = "myApp">
<div ng-controller="myController">
<p><label>Username : </label><input type="text" ng-model="user.username" name="username" id="username" /></p>
<p><label>Email : </label><input type="email" ng-model="user.email"/></p>
<p><label>Verifikasi Email : </label><input type="email" ng-model="user.verify_email" /></p>
<p><label>Password : </label><input type="password" ng-model="user.password" id="password" /></p>
<button type="button" ng-click = "add(user)" >Sig In</button>
</div>
</body>
in case of
ng-click = "add()"
use
ng-click = "add(user)"
in your controller
$scope.add = function(user){
$scope.data = [
{ name : user.username},
{ email : user.email},
{password : user.password }
];
console.log($scope.data);
}); // End add Function
ok, i think the question says it all, but just to be clear, i have the following form (I know it's long... I'm using bootstrap... and jquery):
<form class="form-horizontal" role="form" ng-submit="cal.addEvent()"novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="title" placeholder="Event Title" ng-model="cal.newEvent.title">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="desc">Description:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="desc" placeholder="Event Description" ng-model="cal.newEvent.description">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="stime">Start Time:</label>
<div class="col-sm-8">
<input type="time" class="form-control" id="stime" ng-model="cal.newEvent.start">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="etime">End Time:</label>
<div class="col-sm-8">
<input type="time" class="form-control" id="etime" ng-model="cal.newEvent.end">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" class="btn btn-success btn-block" data-role="none">Add Event</button>
</div>
</div>
</form>
this form is inside a directive which looks like this:
app.directive("calendar", function($http) {
return {
restrict: "E",
templateUrl: "templates/calendar.html",
scope: true,
transclude:true,
link: function(scope) {
//there's a bunch of code here that I don't believe has anything to do with ng-submit so i left it out
},
controller: ["$scope", "$rootScope", function($scope, $rootScope){
this.newEvent = {};
this.removeEvent = function(index){
$http.post("classes/main.php", {"fn": "calendarDel", "id": $scope.chosen[index].id}).success(function(data){
$scope.getEvents($scope.chosen[index].date);
});
}
this.addEvent = function(){
//this.newEvent.date = $scope.dateString;
console.log("AddEvent");
console.log(this.newEvent);
}
$scope.getEvents = function(date){
$http.post("classes/main.php", {"fn": "calendar", "id": $rootScope.user.id, "data": date}).success(function(data){
if(!data.Error){
$scope.chosen = data;
}
});
}
}],
controllerAs: 'cal'
};
});
the problem is that when i try to submit my form, i see no indication that the function has been called... i expect to at least see console.log("AddEvent");
does anybody see what may be causing this problem here?
FYI
the form is in a bootstrap 3 modal div, which is inside the same directive it's called from --- if you need to see the "bigger picture", so to speak, just ask :)
i have tried this.addEvent(), $scope.addEvent(), $rootScope.addEvent() no change
You should just be calling addEvent()
<form class="form-horizontal" role="form" ng-submit="addEvent()" novalidate>
and bind the function to your scope like
$scope.addEvent = function() {
From the angular docs on expresssions
expressions are evaluated against a scope object
so you should not write the expression as ng-submit="$scope.addEvent()" etc
You should add bindToController: true to the directive and specify scope: {} to create an isolate scope.
When an isolate scope is used for a component (see above), and controllerAs is used, bindToController: true will allow a component to have its properties bound to the controller, rather than to scope. When the controller is instantiated, the initial values of the isolate scope bindings are already available.
Reference: $compile
I am a newbie to AngularJS. I have created a form with fields which is disabled using ng-disabled by default. when I click on the edit <button> I want these fields to re-enable.
HTML
<form class="form-horizontal" role="form" ng-submit="edit_setting()" ng-controller="ExchangeController">
<div class="form-group">
<label>Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.name" ng-disabled="true">
</div>
</div>
<div class="form-group">
<label>Host Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.host_name" required ng-disabled="true">
</div>
</div>
<div class="form-group">
<label>Address</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.address" ng-disabled="true">
</div>
</div>
</form>
Controller
function ExchangeController($scope, $http, $cookieStore, $location) {
var edit_exchange_setting = "https://pvbp.com/api/settings.html?contactid=292351&exchange_id=7124&clearinghouseid=1&token=e5349652507c0esae86d50fdbdc53222cf97&page=view";
$http.get(edit_exchange_setting).success(function(response){
$scope.exchange_dt.exchange_name = response.name;
$scope.exchange_dt.exchange_host_name = response.host_name;
$scope.exchange_dt.exchange_last_processed_date = response.address;
});
$scope.edit_exchange_setting_click = (function(){
// how can i make the fields re enable here
});
}
in controller create scope variable,
$scope.disabled= true;
and replace all ng-disabled with that variable like,
...ng-model="exchange_dt.name" ng-disabled="disabled"....
when you click on edit button set $scope.disabled to false like,
$scope.edit_exchange_setting_click = (function(){
$scope.disabled = false;
});
you can have a scope variable keeping the true or false value.and a setter for that variable.
function ExchangeController($scope, $http, $cookieStore, $location) {
var edit_exchange_setting = "https://pvbp.com/api/settings.html?contactid=292351&exchange_id=7124&clearinghouseid=1&token=e5349652507c0esae86d50fdbdc53222cf97&page=view";
$http.get(edit_exchange_setting).success(function(response){
$scope.exchange_dt.exchange_name = response.name;
$scope.exchange_dt.exchange_host_name = response.host_name;
$scope.exchange_dt.exchange_last_processed_date = response.address;
});
$scope.edit_exchange_setting_click = (function(){
// how can i make the fields re enable here
});
$scope.dtName=true;
$scope.isdtNameDisabled=function()
{
return $scope.dtName;
};
$scope.updatedtName=function(flag)
{
$scope.dtName=flag;
};
}
and in your HTML you can bind that getter function.
<div class="form-group">
<label>Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.name" ng-disabled="isdtNameDisabled()>
</div>
</div>
You need to create a variable at the top of controller say
$scope.mydisabled=true;
then set your ng-disable with the variable
ng-disabled="mydisabled"
and on click of edit button set its value to false
$scope.mydisabled=false;
UPDATE
Fiddle
A different (however similar) approach is to wrap your form contents in a fieldset and have ng-disabled in the fieldset only rather than in all the input fields. To make the html more cleaner.
<form class="form-horizontal" role="form" ng-submit="edit_setting()" ng-controller="ExchangeController">
<fieldset ng-disabled ="isFormSetForSaving">
<div class="form-group">
<label>Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.name">
</div>
</div>
<div class="form-group">
<label>Host Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.host_name" required>
</div>
</div>
<div class="form-group">
<label>Address</label>
<div class="col-sm-6">
<input type="text" class="form-control" ng-model="exchange_dt.address">
</div>
</div>
</fieldset>
</form>
and now in the controller set the isFormSetForSaving to true/false as per your logic.
function ExchangeController($scope, $http, $cookieStore, $location) {
$scope.isFormSetForSaving = true;
var edit_exchange_setting = "https://pvbp.com/api/settings.html?contactid=292351&exchange_id=7124&clearinghouseid=1&token=e5349652507c0esae86d50fdbdc53222cf97&page=view";
$http.get(edit_exchange_setting).success(function(response){
$scope.exchange_dt.exchange_name = response.name;
$scope.exchange_dt.exchange_host_name = response.host_name;
$scope.exchange_dt.exchange_last_processed_date = response.address;
});
$scope.edit_exchange_setting_click = (function(){
// how can i make the fields re enable here
$scope.isFormSetForSaving = false;
});
}
what am trying to do is to get data from the form use it in my controller in HTTP post call but it's not working
I know i might have problem with inheritance of scopes but icant solve it.
here is my controller code:
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.submit = function() {
var url = 'http://localhost:3000/register';
var user = {
email: $scope.email,
password: $scope.password,
};
console.log($scope.user);
$http.post(url, user)
.success(function(res){
console.log('You are now Registered');
//$state.go('app.items');
})
.error(function(err){
console.log('Could not register');
// $state.go('error');
});
};
})
Here is the code of my Template:
<form name="register">
<div class="list">
<label class="item item-input no-border">
<input name="fullname" type="text" ng-model="fullname" placeholder="Full Name" required="">
</label>
<label class="item item-input">
<input name="email" type="email" ng-model="user.email" placeholder="Email" required="">
</label>
<p class="blue-font" ng-show="register.email.$dirty && register.email.$invalid">Please Write valid Email.</p>
<label class="item item-input">
<input name="password" type="password" ng-model="user.password" placeholder="Password" required="">
</label>
<button ng-click="submit();" ng-disabled="register.$invalid" type="submit" class="button signup-btn sharb-border white-font blue-bg-alt border-blue-alt ">
Sign Up
</button>
</div>
</form>
Note: i tried the ng-submit its not really the problem
Inside the controller.
.controller('SignUpCtrl', function($scope, $http, $state) {
$scope.user = {
email: '',
password: ''
};
$scope.submit = function() {
And this
var user = {
email: $scope.user.email,
password: $scope.user.password
};
Also drop the ; in ng-click
<button ng-click="submit()" ...>
Try to use rootScope (docs.angularjs.org/$rootScope").