My angularJS push option is not working. Could someone please tell me where I'm going wrong and a fix for it, please? I started learning this language only for a week now. Please excuse me if the error/mistake is silly.
Thank you
<body ng-app="app" ng-controller ="Ctrl" >
<style>
.alert{
color: crimson;
font-size: 19px;
}
.form{
width: 72%;
margin-left: 12%;
border: 2px solid gold;
}
</style>
<script>
var app = angular.module("app", []);
app.controller("Ctrl", function ($scope) {
$scope.main = [{"ngmail": "a.vanhala#evil.com", "pass": "thor", "cpass": "thor"}];
$scope.add = function ($scope) {
$scope.main.push($scope.sf);
};
});
</script>
<div>
<div>
<form name="regform" class="form-horizontal" role="form" style=" margin: auto;" >
<div class="form-group">
<label class="control-label col-sm-2" for="email3">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" placeholder="Enter email" id="email3" name="email" ng-model="sf.ngmail" required/>
<span class ="alert" ng-show=" regform.email.$touched && regform.email.$error.required"> Required</span>
<span class ="alert" ng-show=" !regform.email.$error.required && (regform.email.$touched && regform.email.$invalid)"> Invalid Email</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd3">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd3" placeholder="Enter password" ng-model="sf.pass" name="password" required/>
<span class ="alert" ng-show=" regform.password.$touched && regform.password.$error.required"> Required</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd4">Confirm password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd3" placeholder="Enter password" ng-model="sf.cpass" name="cpassword" required/>
<span class ="alert" ng-show=" regform.cpassword.$touched && regform.cpassword.$error.required"> Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" ng-click="add()" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<br>
<div>
<table border="1">
<thead>
<tr>
<th>Email</th>
<th>password</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="m in main">
<td>{{m.ngmail}}</td>
<td>{{m.pass}}</td>
</tr>
</tbody>
</table>
</div>
</body>
As you are using $scope in function parameter, which is killing the existence of $scope dependency of controller & created a new variable with name $scope. You shouldn't need to add $scope inside your function, it would be already available inside your function.
Code
$scope.add = function () {
$scope.main.push($scope.sf);
};
You don't need to pass $scope in function .
Try like this
$scope.add = function () {
$scope.main.push($scope.sf);
};
have you tried push method without passing the scope to the function
$scope.add= function(){ // no scope here
$scope.main.push($scope.sf);
};
Related
I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!
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));
});
}
};
}]);
})();
Here is my controller file
'use strict';
cms.controller('homeController', function($scope, $http, $window) {
$scope.registerClinic = function () {
var dataParam={
"primaryEmailId": $scope.data1.emai
}
console.log(angular.toJson(dataParam));
$http({
url: "/cms/sign-up",
method: "POST",
headers :{'Content-Type': 'application/json','Accept': 'application/json' },
data: dataParam
})
.success(function(response) {
console.log(angular.toJson(response));
});
};
});
Here is my Html file
in my html file there is ng-model="data1.emai" value when
i want to parse it through a form in a controller it is not happening
<body>
<div class="modal-dialog" style="background: rgb(255, 255, 255);">
<div class="modal-body login metrial">
<div class="modal-body login metrial">
<div class="col-sm-6">
<h4 class="modal-title">Sign up</h4>
<form id="loginform2" ng-submit="registerClinic()" name="loginform2" novalidate>
<div class="form-group">
<input name="email" placeholder="Email ID" ng-class="{'invalid-field': loginform2.emai.$touched || loginform2.$submitted, 'valid-field': loginform2.emai.$valid}"
ng-model="data1.emai" ng-pattern="/^[a-zA-Z0-9]+[a-zA-Z0-9._]+#[a-zA-Z0-9]+\.[a-zA-Z.]{2,}$/" type="text" required>
<span ng-show="loginform2.emai.$touched && loginform2.emai.$error.pattern" class="error-geni">Invalid email</span>
<!-- <label class="field-title">Email ID</label> -->
</div>
<div class="margin-bottom-20">
<div style="width:20%" class="input-group-addon-signup">
<input value="+91" disabled="" type="text"></div>
<div class="input-group-addon-signup"><input id="mobil" ng-class="{'invalid-field': loginform2.mobil.$touched || loginform2.$submitted, 'valid-field': loginform2.mobil.$valid}" onkeypress="return isNumber(event,'mobil');" placeholder="Mobile No" type="text"
ng-minlength="10" ng-maxlength="10" name="mobil" maxlength="10" ng-model="data1.mobil" ng-pattern="/^$|^[0-9X]{10}$/" required>
<span ng-show="loginform2.mobil.$touched && loginform2.mobil.$error.pattern" class="error-geni"> Invalid Mobile Number </span> </div>
<!-- <label class="field-title">Mobile No</label>-->
</div>
<div class="form-group">
<input id="clinic" ng-model="data1.clinic" placeholder="Clinic Name" type="text">
<!-- <label class="field-title">Clinic Name</label> -->
</div>
<select class="form-group" id="subscriptionplans" ng-model="data.Subscription" value="Subscription">
<option id="optionspec">Trial Subscription</option>
<option value="0">Silver</option>
<option value="1">Gold</option>
<option value="1">Platinum</option>
</select>
<div class="form-group">
<input name="signupPassword" id="signupPassword" placeholder="Password" ng-class="{'invalid-field': loginform2.signupPassword.$touched || loginform2.$submitted, 'valid-field': loginform2.signupPassword.$valid}" ng-model="data1.signupPassword"
ng-minlength="8" ng-maxlength="20" type="password" required>
<span ng-show="loginform2.signupPassword.$touched && loginform2.signupPassword.$error.minlength || loginform2.signupPassword.$touched && loginform2.signupPassword.$error.maxlength" class="error-geni">Password must be 8-20 characters long and must have at least one uppercase character & one number and can have special characters -_/##</span>
</div>
<!--confirm Password-->
<div class="form-group">
<input name="docPassword2" id="docPassword2" ng-class="{'invalid-field': loginform2.docPassword2.$touched || loginform2.$submitted, 'valid-field': loginform2.docPassword2.$valid}" placeholder="Confirm Password"
ng-model="data1.docPassword2"
class="gui-input" required ng-compare="loginform2.signupPassword"
ng-disabled="!loginform2.signupPassword.$valid" type="password"/>
<span ng-show="loginform2.docPassword2.$touched && loginform2.docPassword2.$error.compare1" class="error-geni">Password Mismatch </span>
</div>
<button type ="submit" class="btn pull-right" type="button">SIGN UP</button>
</form>
</div>
</div>
</div>
</body>
EDIT : i tried to access through data1.emai it error
angular.min.js:108 TypeError: Cannot read property 'emai' of undefined
at n.$scope.registerClinic (home-controller.js:37)
at fn (eval at compile (angular.min.js:212), <anonymous>:4:262)
at f (angular.min.js:252)
at n.$eval (angular.min.js:134)
at n.$apply (angular.min.js:135)
at HTMLFormElement.<anonymous> (angular.min.js:252)
at HTMLFormElement.c (angular.min.js:35)is saying
I cant understand why my value is not going under $scope in controller through html
EDIT when i am deleting all the values from input
it is working.. but not found the exact problem
you access it from the scope like this:
"primaryEmailId": $scope.emai
while in the template you bind it that way:
ng-model="data1.emai"
You need to have data1 object in the scope to make it consistent, e.g.:
"primaryEmailId": $scope.data1.emai
initialize the $scope.data1 object in controller,
cms.controller('homeController', function($scope, $http, $window) {
$scope.data1 = {};
.....
}
hope this helps.
I'm doing something wrong but cant see what. I've followed the angular js docs and the validations are not working:
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
with a controller as follows:
'use strict';
app.controller('footerController', ['$scope', '$http', function ($scope, $http) {
$scope.requestCallback = function () {
alert("form callback");
};
}]);
However, I can't get my error messages to appear. Also the ng-minlength are not restricting the form submission? Am I missing something simple here?
Your code seems to work fine.
Regarding the submission restriction on error - you have to explicitly use angular's valiation by doing something like:
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
Here's a snippet:
function Ctrl($scope) {
$scope.requestCallback = function() {
alert("form callback");
};
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<div ng-app>
<div ng-controller="Ctrl">
<form name="callbackForm" novalidate ng-submit="callbackForm.$valid && requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required="" />
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required="" />
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" style="font-size: 14px; color:#ff0033" >Your name is required.</p>
<p ng-show="callbackForm.name.$error.minlength" style="font-size: 14px; color:#ff0033" >Your name should have at least 3 letters</p>
<p ng-show="callbackForm.telephone.$error.required" style="font-size: 14px; color:#ff0033" >Your telephone number is required.</p>
<p ng-show="callbackForm.telephone.$error.minlength" style="font-size: 14px; color:#ff0033" >Your telephone number should have at least 11 numbers.</p>
</div>
</form>
</div>
</div>
Your form is validating.. in order to call requestCallback() function, you need to bind your form to controller.
Wrap your form inside controller with ng-controller
<div ng-controller="footerController">
<form name="callbackForm" ng-submit="requestCallback()">
<div class="col-md-3">
<input name="name" type="text" class="form-control" placeholder="Name..." ng-model="callback.name" ng-minlength="3" required=""/>
</div>
<div class="col-md-3">
<input name="telephone" type="text" class="form-control" placeholder="Telephone..." ng-model="callback.telephone" ng-minlength="11" required=""/>
</div>
<div class="col-md-3">
<input type="submit" class="btn btn-sm btn-block" value="Call Me!">
</div>
<div class="col-md-3">
<p ng-show="callbackForm.name.$error.required" || callbackForm.name.$error.minlength class="help-block">Your name is required.</p>
<p ng-show="callbackForm.telephone.$invalid && !callbackForm.telephone.$pristine" class="help-block">Your telephone number is required.</p>
</div>
</form>
</div>
</div>
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.