I want my button enable when both forms are valid.
My button is in the view at the level of the controller while a form is in a directive. What I have done does not work. I thought there might be some wrong syntax within my ng-disabled="" on my button. How do I accomplish this issue without some weird hack? Sorry, I'm new to Angularjs.
Here are my codes.
Cheers!!
index.html
<div ng-app="myApp" ng-controller="myCtrl">
<myform user="user1"></myform>
<myform user="user2"></myform>
<button ng-disabled="user1.formname.$invalid || user2.formname.$invalid">My Button</button>
</div>
my script
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user1 = {formname: "user1form" ,firstName: "John", lastName: "Doe"};
$scope.user2 = {formname: "user2form" ,firstName: "Lisa", lastName: "Smith"}
});
app.directive( 'datepickerform', function() {
return {
restrict: 'E',
scope: {
user : '='
},
templateUrl: 'myform.html',
link: function( scope, element, attrs ) {}
};
});
myform Directive Template :
<form name="user.formname" novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName" required><br>
Last Name:<br>
<input type="text" ng-model="user.lastName" required>
</form>
Related
I am facing this problem while selecting file and showing its name on span.
So basically I am trying that whenever I select some file I want to change the span Tag. This is my view
<form name="fileUploadForm" ng-submit="submitFile(fileUploadForm.$valid)">
<div class="form-group upload-btn-wrapper">
<input type="file" class="form-control" id ="myFileField" file-input="patient_file" required />
<button class="csv-upload-btn">choose file</button>
<span id="file-chosen">{{ patient_file }}</span>
</div>
<div class="form-group">
<input type="submit" value="Upload" class="btn btn-primary">
</div>
</form>
following is my directive code
(function() {
angular.module('practimyze.dashboard')
.directive('csvUploader', ["$parse", function($parse) {
return {
restrict: 'EA',
templateUrl: "dashboard/breakdown/csv-uploader/csv-uploader.tpl.html",
replace: true,
controller: function($scope, valueHandler, Auth, $rootScope, blockUi, DashboardApi, fileUploadService, apiLinks, toaster){
},
link: function(scope, element, attrs) {
var model = $parse(attrs.csvUploader);
var modelSetter = model.assign;
element.bind('change', function() {
scope.$apply(function() {
modelSetter(scope, element[0].patient_file);
});
});
}
};
}]);
})();
Initially I did this
$parse.assign(scop, element[0].files);
this was getting me error that parse has not function assign. Then I changed it to what i have written now it says (modelSetter is not a function).
I am not sure where i am doing wrong, Please help me out thanks
Edited:
this is the fiddle link, it seems to be working perfect there fiddle link
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>
I am trying validate the textbox allow only integer number and greater than zero values.
Here I attached my code.
Html:
<body ng-app="myApp">
NUMBER ONLY <input type="text" allow-pattern="\d" />
</body>
Js:
var app = angular.module("myApp",[]);
app.directive('allowPattern', [allowPatternDirective]);
function allowPatternDirective() {
return {
restrict: "A",
compile: function(tElement, tAttrs) {
return function(scope, element, attrs) {
element.bind("keypress", function(event) {
var keyCode = event.which || event.keyCode; // I safely get the
if (!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))) {
event.preventDefault();
return false;
}
});
};
}
};
}
Also I tried like this bellow:
<body ng-app="myApp">
NUMBER ONLY <input type="text" allow-pattern="^[1-9][0-9]*$" />
</body>
But its not working.
Check jsfiddle link: click here
You can make use of angular form validation and also use ng-model-options
Here is the link to Codepen
Controller snippet :
var app = angular.module('app',[]);
app.controller('myCtrl',function($scope){
$scope.onlyNumbers = /^[1-9]+[0-9]*$/;
})
View :
<div ng-app="app">
<br />
<br />
<div class="col-md-2" ng-controller="myCtrl">
<form name="myForm1">
<div class="form-group" ng-class="{'has-error':myForm1.number1.$invalid}">
<label for="">Following validation happens as the user entrs a value.</label>
<input class="form-control" ng-pattern="onlyNumbers" ng-model="value1" name="number1"/> Valid? {{myForm1.number1.$valid}}
</div>
</form>
<form name="myForm2">
<div class="form-group" ng-class="{'has-error':myForm2.number2.$invalid}">
<label for="">Following validation happens after blur </label>
<input class="form-control" ng-pattern="onlyNumbers" ng-model="value2" name="number2" ng-model-options="{ updateOn: 'blur'}"/> Valid? {{myForm2.number2.$valid}}
</div>
</form>
For more on how you can better this process through controllers refer this link
I'm sure this will be a duplicate of some other post, but I just can't find it?
I have just started looking at Angular and have written the following as per various sources online.
HTML:
<div data-ng-app="appAuthentication">
<form name="authentication" method="post" data-ng-controller="AuthenticationController" data-ng-submit="doAuthentication(authentication)" novalidate>
<fieldset>
<label for="sign-in-email-address">Email address:</label>
<input id="sign-in-email-address" name="sign-in-email-address" data-ng-model="authentication.emailAddress" type="text" required />
<label for="sign-in-password">Password:</label>
<input id="sign-in-password" name="sign-in-password" data-ng-model="authentication.password" type="password" required />
<button type="submit">Go ยป</button>
</fieldset>
</form>
</div>
And my Angular:
angular.module('appAuthentication', [])
.controller('AuthenticationController', ['$scope', function($scope, $http) {
$scope.authentication = {
emailAddress: '',
password: ''
};
$scope.doAuthentication = function(authentication) {
// console.log('Hello ' + authentication.emailAddress);
$http({
method : 'POST',
url : '/actions/authentication/sign-in.php',
data : authentication.emailAddress
})
.success(function () {
console.log('Success');
})
.error(function () {
console.log('Failure');
});
};
}]);
In the console I am getting:
TypeError: undefined is not a function
at k.$scope.doAuthentication (http://cms2.indypub.co.uk/static/scripts/core.js:16:4)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:176:88
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:165
at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:111:373)
at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:112:121)
at HTMLFormElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:193:147)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:161
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:7:290)
at HTMLFormElement.c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js:31:143)
When I uncomment the first console.log in the JS the emailAddress is written out in the console.
Any pointers to where I am going wrong greatly appreciated.
Thanks,
Tony.
The main problem is in your controller dependencies, you have implicitly put $http in the function parameter but not in its array notation.
change:
controller('AuthenticationController', ['$scope', function($scope, $http) {
// your code
});
to
controller('AuthenticationController', ['$scope', '$http', function($scope, $http) {
// your code
});
Furthermore, change your name value attributes in your input tags, make it so it conforms like a variable name - Since you'll be accessing these names when validating forms.
e.g. <form name>.<input name>.$pristine or <form name>.<input name>.$error
change:
<label for="sign-in-email-address">Email address:</label>
<input id="sign-in-email-address" name="sign-in-email-address" data-ng-model="authentication.emailAddress" type="text" required />
<label for="sign-in-password">Password:</label>
<input id="sign-in-password" name="sign-in-password" data-ng-model="authentication.password" type="password" required />
to:
<label for="sign-in-email-address">Email address:</label>
<input id="sign-in-email-address" name="sigInEmailAddress" data-ng-model="authentication.emailAddress" type="text" required />
<label for="sign-in-password">Password:</label>
<input id="sign-in-password" name="signInPassword" data-ng-model="authentication.password" type="password" required />
I have an AngularJS app with a list of users with an 'Edit' button beside each user. Each user has a number of subjects associated with them. When I click on 'Edit', it opens a form in which you can edit user details, and select associated subjects from a list of checkboxes. I'm trying to figure out how to bind the subject checkboxes so that the subjects which the
user is already associated with are checked, and the rest are unchecked. Any suggestions appreciated.
My HTML:
<form name="UserEditForm">
Name: <br /> <input type="text" name="name" ng-model="user.name"> <br />
{{name}}
Email: <br /> <input type="text" name="name" ng-model="user.email"> <br />
{{email}}
<div class="control-group">
<label class="control-label" for="inputSubjects">Subjects:</label>
<div class="form-group">
<label ng-repeat="subject in subjects" class="checkbox">
<input type="checkbox" ng-checked="{user.subjects}" name="selectedSubjects[]" value="{{subject.id}}" ng-model="subject.selected"> {{subject.name}}
</label>
</div>
<br />
<a ng-click="updateUser()" class="btn btn-small btn-primary">Save Changes</a>
</form>
My UserEditCtrl:
angular.module('myApp.controllers')
.controller('UserEditCtrl', ['$scope', '$routeParams','SubjectsFactory', 'UserFactory', '$location',
function ($scope, $routeParams, SubjectsFactory, UserFactory, $location) {
// callback for ng-click 'updateUser':
$scope.updateUser = function () {
$scope.user.subjects = $scope.selection;
UserFactory.update($scope.user);
$location.path('/users');
};
// callback for ng-click 'cancel':
$scope.cancel = function () {
$location.path('/users');
};
$scope.user = UserFactory.show({id: $routeParams.userid});
$scope.subjects = SubjectsFactory.query();
$scope.selection = [];
// helper method
$scope.selectedSubjects = function selectedSubjects() {
return filterFilter($scope.subjects, { selected: true });
};
// watch subjects for changes
$scope.$watch('subjects|filter:{selected:true}', function (nv) {
$scope.selection = nv.map(function (subject) {
return subject.id;
});
}, true);
}]);
As #jkinkead said, your code looks good, I fixed the ng-checked binding in accordance with your ng-model expression
Here's a simplified plunker : http://plnkr.co/edit/qaIBExtVbNdSXlQlbMym?p=preview
EDIT 1: I edited and improved the plunker to get closer to your case.