I am trying to create a form with two buttons Edit & Submit. Submit is initially disabled . What I need to achieve is when Edit is clicked Submit button should be enabled and edit is disabled. Here is my code so far:
<div class="row">
<button id="editBtn" type="button" data-dismiss="modal" (click)="submitEditedFormData()" class="btn modal-btn btn-default">Edit</button>
<button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default">Submit</button>
</div>
You can toggle the value of isValid when you click on edit button and you can do the same when you click on submit by adding a (click) event.
<div class="row">
<button id="editBtn" type="button" data-dismiss="modal" (click)="submitEditedFormData();isValid=!isValid" class="btn modal-btn btn-default" [disabled]="isValid">Edit</button>
<button id="submitBtn" [disabled]="!isValid" type="button" data-dismiss="modal" class="btn modal-btn btn-default">Submit</button>
</div>
Related
I have form with input fields, radio buttons, select boxes. Need submit button make active after when all fields have a data.
example my fields and button.
<div class="form-group" ng-class="{ 'has-error': myForm.birth.$touched && myForm.birth.$invalid }">
<label class="col-sm-3 control-label">{{getWord('Dob')}}<sup>*</sup></label>
<div class="col-sm-6">
<p class="input-group">
<input type="text" placeholder="1988-12-12" class="form-control" name="birth"
uib-datepicker-popup="{{format}}" ng-model="patient.DOB"
data-placeholder=""
is-open="isOpened" datepicker-options="dpOptions"
close-text="Close" alt-input-formats="altInputFormats" required/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalender()"><i
class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<p ng-show="myForm.birth.$error.required" style="color:red" ng-if="myForm.birth.$touched">Date of birth is
required.</p>
</p>
</div>
</div>
and code button
<div class="form-group">
<div class="text-center">
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
<button class="btn btn-labeled btn-danger" type="button">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>
{{getWord('clearbutton')}}
</button>
</div>
</div>
and need same for clear button, clear all input fields.
Just modify your button code as:
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()"
ng-disabled="myForm.$invalid">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>
{{getWord('makebutton')}}
</button>
I added ng-disabled="myForm.$invalid" which will disable the button when the any of the input field is not valid.
I'm having some trouble submitting a form in a Bootstrap modal using AngularJS. The user is currently able to mash the submit button a few times before the modal dismisses and call the submit function each time. This is obviously not desired behaviour.
So I tried adding data-ng-disabled to the button, and disabling it when the submit button is clicked. This works correctly and the user cannot submit more than once. But now the modal does not close, even using data-dismiss="modal" with the button. I've read about AngularUI Bootstrap but if there's a way to fix this without changing my modals that would be great.
A snipper of the submit button in the modal:
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" data-ng-disabled="isDisabled" ng-click="disableButton(); submit()">Submit</button>
<button class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
The disableButton() function:
$scope.disableButton = function(){
$scope.isDisabled = true;
}
You need to use the name of your form and use that for ng-disabled, then use the $invalid Input State validation, see below:
<button type="button" class="btn btn-primary" ng-disabled="myForm.$invalid" ng-click="submit()">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
I'm trying to add angular-bootstrap tooltip in each button of button-group. When I do this, hovering right button destroys all buttons styles.
html:
<div class="btn-group" style="margin-top:100px;">
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
js:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope) {
$scope.dynamicTooltip = 'Hello, World!';
});
Here is my plunker: http://plnkr.co/edit/NFjJJXEKyJHDgddcPdNa?p=preview
It's because your tooltip is generating inside the btn-group. This means the 'Right' button is no longer the last element in the group, as such the styling changes until the tooltip disappears. Try appending the tooltip to the body, rather than the parent.
<label class="btn btn-primary" tooltip="{{dynamicTooltip}}" tooltip-append-to-body="true" ng-model="radioModel" btn-radio="'Right'">Right</label>
There seems to be a problem converting ui.bootstrap.buttons to be used with ng-repeat. The ui.bootstrap.buttons example and documentation is here: http://angular-ui.github.io/bootstrap/
Bascially the default example works nicely: http://plnkr.co/edit/2O81y57GtfP6EPNH9qYa?p=preview
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>
But when it's converted the use ng-repeat, it breaks: http://plnkr.co/edit/nzx1VTGN4Q59JlFCU53V?p=preview
<div class="btn-group">
<label ng-repeat="test in ['Left', 'Middle', 'Right']" class="btn btn-primary" ng-model="radioModel" btn-radio="'{{test}}'">{{test}}</label>
</div>
Try
<label ng-repeat="test in ['Left', 'Middle', 'Right']" btn-radio="test" class="btn btn-primary" ng-model="radio.model">
instead of
btn-radio="'{{test}}'"
On top of this ng-repeat is creating a new scope so you need to account for this as well. Here is a working plunk: http://plnkr.co/edit/h5e5OgFCqv28MPy4tEaM?p=preview
In the end after some testing I got it working using ng-class for initial selected value and own ng-click handler that changes the selected button
HTML-code for the buttons:
<div class="btn-group">
<button ng-repeat="(timelineIndex, timeline) in timelines" ng-click="selectTimeline(timeline)" ng-class="{active: timeline.name === selectedTimeline.name}" class="btn btn-primary">
{{timeline.name}}
</button>
</div>
in controller:
$scope.selectTimeline = function(activeTimeline) {
$scope.selectedTimeline = activeTimeline;
};
Consider a form with three buttons:
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<button class="btn" ng-click="cancelEdit()">Cancel</button>
<button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
When I click cancel, cancelEdit() is being called, then updateUser() is being called. I don't want the updateUser() method to be called. Is there a way to suppress this form submission (preferebly wtihout jQuery?)
Note: I'd still like to be able to hit enter and default to the Save action.
There is a type attribute for the <button> which defaults to submit - see this spec. Thus every button in your form is a submit button. You need to specify the button type for buttons which should not trigger the form submission, like this:
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary">Save</button>
<button type="button" class="btn" ng-click="cancelEdit()">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
And also no need to put the submit action to both ng-click and ng-submit - it will trigger double submit. I would advise to use ng-submit because it catches all ways of form submission, like pressing ENTER and not only clicking on submit button.
Try this
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary">Save</button>
<a class="btn" ng-click="cancelEdit()">Cancel</a>
<a class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</a>
</div>
</form>
or this
<form>
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<button class="btn" ng-click="cancelEdit()">Cancel</button>
<button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>
ultimately I don't think you need updateUser() twice in the html
You can use for cancel button type="reset":
<button type="reset" class="btn" ng-click="cancelEdit()">Cancel</button>
The button is a reset button (resets the form-data to its initial values)
http://www.w3schools.com/tags/att_button_type.asp
I was having same problem.I used anchor instead of button.
<form ng-submit="updateUser()">
<div>Name <input type="text" ng-model="userToEdit.name" /></div>
<div>
<button class="btn btn-primary" ng-click="updateUser()">Save</button>
<a class="btn btn-danger" ng-click="cancelEdit()" role="button">Cancel</a>
<button class="btn btn-primary" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button>
</div>
</form>