I am using Angular UI btn-radio directive to show 2 different buttons:
<label class="btn btn-default" ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode1'">Mode1</label>
<label class="btn btn-default" ng-model="mode" ng-change="toggleMode()" btn-radio="'Mode2'">Mode2</label>
And this works well, however I want to introduce some kind of validation so that when one of these buttons are clicked they became active only if validation is passed. For example, If I click on Mode2, that button should be active only if some condition is satisfied. The problem is that by default active class is added on every click, and btn-radio directive stores the state active. Is there a way to get around this ?
You can look at my answer in this plunker
I just removed the "ng-model",made my own condition to add "active" on the button and created a custom click that will check the condition before switching.
<div class="btn-group">
<label class="btn btn-default" ng-class="{active:mode==='Mode1'}" ng-click="activateMode('Mode1')">Mode1</label>
<label class="btn btn-default" ng-class="{active:mode==='Mode2'}" ng-click="activateMode('Mode2')">Mode2</label>
</div>
And the activateMode function :
$scope.activateMode = function(modeName){
//I don't allow to switch mode if the checkbox isn't checked.
if($scope.changeMode){
$scope.mode = modeName;
}
}
Hope it helped.
Related
I'm just beginner to Angular and I have got the following query.
I've used angular2-ladda for button loading, I want to keep button disabled when view loads, what I did is as follow,
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" disabled="disabled">Add</button>
about the first question I've used attribute disabled to disable button but it is not working, and the second it overwrites class btn btn-success.
for solution what i did is, I've disabled button from JS and the btn btn-success style applied by css.
is there any way to solve this, if yes please let me know.
To disable the button use [disabled] property.
<button [ladda]="isLoading" data-color="mint" data-size="s" class="btn btn-success add-product" [disabled]="disabled">Add</button>
I am trying to create the following UI/UX buttons:
.. [2015] [2016] [2017]
Where the current year (in the time of writing, 2017) is 'selected' by default, however, when the user clicks '2015', '2017' and '2016' should be deselected (These buttons are 'mutually exclusive')
The buttons are being generated from an external data source that provides me data with years:
<button *ngFor="let year of styles.years" type="button" name="button" class="btn btn-default" id="{{year.year}}">
{{year.year}}
</button>
How can I create a system of buttons where one button is 'auto-selected', and when 'other' button is selected, it deselects the button that's actively selected, and sets the now clicked button to 'selected'?
Set a property in the component activeYear and control it by binding logic to the (click) of a button
<button *ngFor="let year of styles.years"
[ngClass]="{ active: activeYear === year }"
(click)="activeYear = year.year"
type="button" name="button" class="btn btn-default" id="{{year.year}}">
{{year.year}}
</button>
Heres a working Plunker demonstrating this
For those who would like to use multiple classes, like in my case:
Add a comma, and add a new style:condition.
[ngClass]="{ selected: activeYear === year.year, 'btn-default': activeYear !== year.year}"
Hope this helps others as well
I have a multiple pages form where people can press next and previous. The form validates when trying to click next but it also validates when they click previous, which shouldn't be the case.
I've searched on Google and used some solutions provided by different websites such as class="cancel" or formnovalidate="formnovalidate" but nothing has worked for me so far.
These are my two buttons who are both in a form
<button data-role="prevbutton" class="btn btn-secondary pull-left">Previous</button>
<button data-role="nextbutton" class="btn btn-primary">Next</button>
There is no simple JS code that calls a function but more like this:
flow.isBelgianResidentChangeHandler = function(isBelgianResident) {
if (isBelgianResident) {
$('[data-role="nextbutton"]').attr('disabled', false);
} else {
$('[data-role="nextbutton"]').attr('disabled', true);
} };
It's hard to know without seeing your JavaScript code, but it could be because the default behavior of button elements in a form are to be submit buttons. So, whichever button you pressed, it would still submit your form. If this is the problem, then adding type="button" to your previous button will fix it.
<button data-role="prevbutton" type="button" class="btn btn-secondary pull-left">Previous</button>
I'm using xeditable angular directive.Could you tell me how to show the save button after the form's submit ? At this moment when we click the saveit goes to the Edit mode.That is the default behaviour.So I need to override it.That is I need to stop it and show the save button.Thanks in advance.
JSFiddle
<form editable-form name="tableform" onaftersave="saveTable()">
//Ui code here
<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary">save</button>
</form>
UPDATE
Actually my use case is where I need to show the spinner until finish the form's submit.After that I'll close the whole form (this is a modal popup on my app).That's why I need to stay on that page.I'm going to show the spinner on top of the Save button.
In your code submit is on form level not at row level.
So, you have pass your validation which is checkName() function in your case (you can try by commenting it), then only it will call saveTable() function.
Or you can put your saveTable() in row level.
Your save button is inside a conditional tag that is only displayed on edit mode.
You may append it into the .btn-edit like:
<div class="btn-edit">
<button type="button" class="btn btn-default" ng-show="!tableform.$visible" ng-click="tableform.$show()">edit</button>
<button type="submit" ng-show="!tableform.$visible" ng-disabled="tableform.$invalid" class="btn btn-primary">save overall</button>
</div>
Take a look that using the form controller you may check if the entire form is valid or not
JSFiddle
i am using bootstrap button-group checkbox with toggle. To easily identify selected option, using the toggle function (courtesy - one of the post here). Working example here.
<div class="form-group">
<label class="sr-only" for="Test">Boxes</label>
<div class="controls" name="Test">
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-default" class-toggle="btn-info">AA</div>
<div class="btn btn-default" class-toggle="btn-info">BB</div>
<div class="btn btn-default" class-toggle="btn-info">CC</div>
</div>
</div>
</div>
stumped with:
1) how to validate that user has to select at least 1 button and
2) how to capture value(s) of selected buttons to be sent to PHP (form).
very novice with web development. Need help. Thanks.
Suppose you have three buttons as shown below:
<input type="button" class="button" value="Button1">
<input type="button" class="button" value="Button2">
<input type="button" class="button" value="Button3">
You can make a hidden field there with an array as given below:
<input type="hidden" class="newField" name="buttonValue[]">
Now, use it in Jquery:
$(document).ready(function(){
$('.button').click(function(){
var values = $(this).val();
$('.hidden').val(values);
});
});
and now when you submit a form then you can easily get value from that field and make a validation accordingly.
there is many ways to do this if you want to submit a form with PHP than its very simple you can add a class and use a hidden fields on the click you can add a class and put a value on hidden field and after the submit you can easily get all the value form hidden fields. you can easily check value of hidden fields, so with this you can validate as well that user select any button or not..