I use AngularJSs editable-text to make things changeable. My question now would be it there is a possibility to disable the confirmation while data-e-ng-change is false?
<span editable-text="vm.foundedUser.username" data-e-ng-change="vm.checkUsername($data)" onbeforesave="vm.checkUsername($data)" onaftersave="vm.updateUser()">
{{vm.foundedUser.username || '--'}}
</span>
My checkUsername function looks like this:
function checkUsername(username) {
if(username.length < 5) {
return false;
}
validateService.checkUniqueUsername(username).success(function(response) {
return response.data;
}).error(function(e){
console.log('error in management.controller.js#checkUsername');
});
}
but it does not work, I guess because validateService.checkUniqueUsername is asynchron but I still dont know.
Try this:
<button type="submit" ng-disabled="vm.checkUsername($data)"> Submit </button>
Related
I am implementing an input button, which is visible only if function returns "True" from the back-end.
//Angular Method which returns either true or false, Which is working fine
//Show/Hide Printer
$scope.showHideFunc = function () {
if ($scope.Foo.id != null && $scope.Foo.id != '') {
$http.get(getTFfromDBURL + '/' + $scope.Foo.id).success(function
(data) {
$scope.showHide = data;
});
}
};
//Here is the code for button
<button id="btn-add-device" class="btn btn-info" ng-show="showHide" ng-click="showManagePrinter();loadDrawersForPrinter()">
<span class="glyphicon glyphicon-plus"></span> {{showHide}}
</button>
After all its weird at {{showHide}}, where its getting correct values, while its not affecting ng-show="showHide".
Appreciate thoughts.
Thank you.
Trying to figure out the best way to stay on the same page alerting the user if they have failed to check at least one checkbox.
HTML:
<div class="col3">
<input type="checkbox" ng-model="$parent.value5" ng-true-value="'Togetherness'" ng-false-value="">
<span class="checkboxtext">
Togetherness
</span><br>
<!--<p>We value our people and recognize that <strong>Together</strong> we achieve superior results.</p><br>-->
<div class="col3">
<a ui-sref="form.submit">
<button name="button" ng-click="SaveValue()">Continue</button>
</a>
Back-end angularJS to check if one of the boxes was checked-
$scope.SaveValue = function () {
var valueStatus = [];
if ($scope.value1 === "Methodical")
{
valueStatus.push($scope.value1);
}
if ($scope.value2 === "Relentless")
{
valueStatus.push($scope.value2);
}
if ($scope.value3 === "Togetherness")
{
valueStatus.push($scope.value3)
}
if ($scope.value4 === "Excellent") {
valueStatus.push($scope.value4)
}
if ($scope.value5 === "Ingenious") {
valueStatus.push($scope.value5)
}
return valueStatus
};
Basically I'm wanting to make an array of these values and then return it. However, I want the user to check at least one box. I've tried redirecting back to the page if valueStatus[0] == null. However, I don't think this is the best way to validate and it does not work completely how I think it ought to.
The way I solve this is putting validation on the length of array (valueStatus in your case) with hidden number input. The input will have min validation on. So, if user fails to check at least one, the form is not submitted;
<input type="number" name="valueStatus" ng-model="valueStatus.length" min="1" style="display: none">
Then, you can use normal validation on valueStatus that is available on the form model
myFormName.valueStatus.$valid
This way, most of the logic is put into the template, which is called angularjs way ;)
UPDATE
Forgot to mention:
You need to update the list of checked values on on-change checkbox event
<input type="checkbox" ng-model="checkboxValue1" on-change="updateValueStatus(checkboxValue1)">
<input type="checkbox" ng-model="checkboxValue2" on-change="updateValueStatus(checkboxValue2)">
and in controller
$scope.updateValueStatus = function(value){
var indexOf = $scope.valueStatus.indexOf(value);
if(indexOf < 0) {
$scope.valueStatus.push(value);
} else {
$scope.valueStatus.splice(indexOf, 1);
}
}
Hope it will help people with the same issue
simply just check the valueStatus length is equal to 0 or not
$scope.SaveValue = function () {
var valueStatus = [];
if ($scope.value1 === "Methodical")
{
valueStatus.push($scope.value1);
}
if ($scope.value2 === "Relentless")
{
valueStatus.push($scope.value2);
}
if ($scope.value3 === "Togetherness")
{
valueStatus.push($scope.value3)
}
if ($scope.value4 === "Excellent") {
valueStatus.push($scope.value4)
}
if ($scope.value5 === "Ingenious") {
valueStatus.push($scope.value5)
}
if (valueStatus.length === 0 ) {
console.log('please select atleast one select box')
}
return valueStatus
};
Edited
remove the ui-sref tag and change the state inside your click function
<button name="button" ng-click="SaveValue()">Continue</button>
in the saveValue function add this
if (valueStatus.length === 0 ) {
console.log('please select atleast one select box')
}else{
$state.go('form.submit') // if atleast one selected then the page will change
}
I need help.
My code is in a login.
When the user click in login: I put a button disable to avoid that the user do click many times when the system is working, waiting for a answer
My code works fine, but I put a loader class when the user click in button login.
When the user put the password and is acepted, the system send us to the next view. This works fine, but...
The problem is:
When the user put a invalid pasword this.loadingActive = true; dont change.. the button remain with the spin active forever. I mean something happend that the variable loadingActive dont change to true
my html
<button class="btn btn-default btn-lg btn-block"
ng-class="{'disabled': login.loadingActive === false}"
ng-disabled="loginForm.$invalid || login.loadingActive === false"
ng-click="login.login()">
<span ng-hide="login.loadingActive" class="fa fa-refresh animacion-cargando"></span>
<span ng-hide="login.loadingActive">loading...</span>
<span ng-show="login.loadingActive">Login</span>
</button>
This is my js file
login() {
this.loadingActive = false;
this.error = '';
Meteor.loginWithPassword(this.credentials.email.toLowerCase(), this.credentials.password,
this.$bindToContext((err) => {
Meteor.setTimeout(() => {
if (err) {
this.loadingActive = true;
this.error = err;
} else {
this.loadingActive = true;
this.$state.go('app.pageOne');
}
}, 1000);
})
);
}
Why when I put a Meteor.setTimeout inside a Meteor.loginWithPassword happen this?
any ideas?
thanks!
I see you wrap the callback inside a this.$bindToContext. Not sure what it does but my guess is that it changes the context (this) the callback function so that this.loadingActive = true has no effect.
To fix this you could use a reference variable:
login() {
const self = this;
// ...
Meteor.loginWithPassword(
self.credentials.email.toLowerCase(),
self.credentials.password,
self.$bindToContext((err) => {
Meteor.setTimeout(() => {
// ...
self.loadingActive = true;
}, 1000);
}
));
}
My form have two buttons say "Draft" and "Submit", so for draft some validations are applicable and same for submit button. I have one variable cmpnStatus it is initialised with value 1. For draft value of cpmnStatus is 0 and for submit it is 1.
<div class="form-group">
<label>Short Description<span class="red-ast">*</span></label><br/>
<textarea ng-model="shortdesc" ng-change="shortchange(shortdesc)" class="form-control b-rad3" ng-required="cmpnStatus == 0"></textarea>
</div>
<button type="submit" ng-click="campform.$valid && submitDraft(campform)" class="btn btn-draft">Save as draft</button>
<button type="submit" class="btn btn-launch" ng-click="campform.$valid && submitCampaign()">Submit for Approval</button>
Below is the code of submitDraft function.
$scope.submitDraft = function(form){
$scope.cmpnStatus = 0;
if(form.$valid) {
alert("valid");
} else {
alert("invalid");
}
//Then call to save data in db
};
My problem is when I click on draft form shows valid and save data in db and after that it points the required validation because initially value of cpmnStatus is 1 and according to condition required validation condition fails. Again I click on draft button now required validation is working fine because value of cpmnStatus changes from 1 to 0. I want that when user click on draft button and when the value of cpmnStatus changes it should be show me required validation (even in first click) according to condition(ng-required="cmpnStatus == 0"). Is there any other way to do the same ?
1st change the html to be like this :
<button type="submit" ng-disabled="campform.$error" ng-click="submitDraft(campform)" class="btn btn-draft">Save as draft</button>
<button type="submit" class="btn btn-launch" ng-disabled="campform.$error" ng-click="submitCampaign()">Submit for Approval</button>
Disabling button for user when form is invalid is better.
About the cmpnStatusThings i suggest you to use a checkbox or radio button to switch between draft or approval mode :
<input type="checkbox" ng-model="cmpnStatus" ng-true-value="1" ng-false-value="0"/>
Radio sample :
<input type="radio" ng-model="cmpnStatus" ng-value="1"/>
<input type="radio" ng-model="cmpnStatus" ng-value="0" />
Thank you for the clarification. Here is a function I am currently using:
$scope.checkIfSaveAllowed = function() {
var timer = setTimeout(function() {
var validControls = document.getElementsByClassName('has-feedback ng-scope has-success');
var modalSaveBtn = document.getElementById('eventModalSaveBtn');
if (validControls.length >= 3) {
if (validControls.length == 4) {
modalSaveBtn.disabled = false;
}
else if (validControls[0].id != "commentFormGroup" && validControls[1].id != "commentFormGroup" && validControls[2].id != "commentFormGroup") {
modalSaveBtn.disabled = false;
}
}
else {
modalSaveBtn.disabled = true;
}
}, 50);
}
I call this function on every field in the form using an ng-change. That else if in the middle is how I accomplish what you are asking about. The commentFormGroup is not required in my code. I check if (1) there are only three valid fields and (2) none of those valid fields are the optional field, then the button should be enabled.
In your case, you could have two functions called by the ng-change, one for each button or you could specify when one should be disabled and the other enabled.
Alternatively, you could display a customized error message instead of disabling the button. I hope this helps.
I have 3 blocks that are showed based on a boolean.
<button ng-if="user.friendship == null" ng-click="requestFriendship(user.user.id)" class="button button-outline button-calm">
Invite as friend
</button>
<button ng-if="user.friendship == false" ng-click="removeFriendship(user.user.id)" class="button button-calm">
Friend request sent
</button>
<button ng-if="user.friendship == true" ng-click="removeFriendship(user.user.id)" class="button button-calm">
Unfriend
</button>
Well at first i don't know if it is the best solution to structure it that way, so do not hesitate to correct me here if i'm wrong.
then i have my function :
$scope.requestFriendship = function(id) {
$http.post(domain+'/api/friendship/request/'+id+'?access_token='+access_token.key).then(function(response){
// If success change button
}, function(error) {
console.log(error);
});
}
$scope.requestFriendship = function(id) {
// function
}
So based on the result (my api is returning success or failed, so if success), I need to Hide the previous button and change it to its new state.
So how can i hide and show buttons based on the answer of the API.
You would set $scope.user.friendship to the correct value to show and hide the relevant button:
This will show the unfriend button:
$scope.user.friendship = true;
This will show the Friend request sent button:
$scope.user.friendship = false;