What I am trying is, to disable the action of close in ng-dialog pop up until any other button is clicked.I want to do that until I give some text on input in pop up and click on save button the pop up should not be closed either by into (*) mark
Suppose you have a template of pop up like below :
<button type="button" ng-click="closeThisDialog('button')" ng-disabled="demoForm.$invalid" class="btn btn-default pull-right">x</button>
<br>
<form name="demoForm">
<h3>Close button disabled untill no input</h3>
<p>Here input field is required so untill input box is not valid you cannot close the dialoug.</p>
<p>Once you enter the input close btn will be enabled</p>
<input ng-model="confirmValue" required/>
<br>
<br>
<button type="button" ng-disabled="demoForm.$invalid" ng-click="closeThisDialog('button')" class="btn btn-default">Cancel</button>
<button type="button" class="btn btn-default">Save</button>
</form>
You can add form in your pop-up template just shown in above template.
Now as per your requirement user should not close the popup until he didn't enter any input so there is validation in form.
Just disable close button until form is not valid.
Check out this demo
You can refer more here in doc of ng-dialog.
the easiest way of having control over ngDialog via buttons is to change the default boolean of closeByDocument and showClose to false. Then you can only use buttons to exit.
Related
<form role="form" id="myForm" name="myForm">
<input class="form-control" ng-model="firstName" type="text" />
<input class="form-control" ng-model="lastName" type="text" />
<button class="btn btn-info" ng-disabled="myForm.$pristine">cancel</button
<button class="btn btn-primary" ng-disabled="myForm.$pristine">update</button
</form>
Assume that there is a list of data in a table.
When I click a data, a modal will pop up with data on it(in the example the firstName and lastName).
Inside the modal there’s an EDIT button that when u click it, two other buttons will appear -- CANCEL and UPDATE. I want to set the update button to disabled while there is no changes yet happening in the FORM.
By using $pristine I found a solution, but there’s one problem:
When I try to edit the data and decide to cancel it (by resetting the current data), the next time I click EDIT the UPDATE button is already enabled even though there are no changes to the data yet.
Is there any solution for this?
On cancel set the form to pristine. This will set $pristine back to true which should disable the buttons.
<button class="btn btn-info" ng-disabled="myForm.$pristine" ng-click="myForm.$setPristine()">cancel</button
For cancel buttons I add a function in the controller to reset all fields and then set the form back to pristine which effectively resets the form.
I have a scenario where user click on Add Address button and Address Detail Modal dialog window is appeared,
It have 4 elements two text boxes for address detail info and two button Add and Cancel.
I am able to click on cancel and Add button in Model Dialog Window directly, but unable to locate text boxes inside it.
Below is code for text box in Modal Dialog Window.
input id="Address" class="form-control" type="text" value="" name="Address" data-toggle
="tooltip" data-placement="bottom" data-bind="value:Address, ValidationMessage: Address"
data-original-title="" title=""
How to access modal box element as Model Dialog window is part of same window
so Alert and Window switching methods might be not useful in that case ?
Please any advice?
Update Sample code that i am trying.
// Click on Address link It open Model window
driver.findElement(By.xpath(".//div[#id='member_78121']div/table/tfoot/tr/td/div/button")).click();
here i am giving wait condition.
//Inside modal window
//TextBox first
driver.findElement(By.id("AddressLine1")).sendKeys("plot no-23");
//textbox second
driver.findElement(By.id("AddressLine2")).sendKeys("plot no-23");
//Add button
driver.findElement(By.id("Add")).click();
// driver.findElement(By.id("Cancel")).click();
here i am able to click on Add or Cancel button if you comments text boxes code but
i am getting error for textboxes "element is not visible"
This is Add button code for reference
button id="Add" class="btn btn-default" value="Add" type="button" title="" name="Add"
data-toggle="tooltip" data-placement="bottom" data-bind="click:$parent.SaveAndCloseAddressPopup, Tooltip:$parent.SaveAndCloseAddressPopup"
data-original-title="Save changes and close"
// Click on Address link It open Model window
driver.findElement(By.xpath(".//div[#id='member_78121']div/table/tfoot/tr/td/div/button")).click();
here i am giving wait condition.
//Inside modal window
//TextBox first
driver.findElement(By.id("AddressLine1")).sendKeys("plot no-23");
//textbox second
driver.findElement(By.id("AddressLine2")).sendKeys("plot no-23");
//Add button
driver.findElement(By.id("Add")).click();
// driver.findElement(By.id("Cancel")).click();
here i am able to click on Add or Cancel button if you comments text boxes code
but i am getting error for textboxes "element is not visible"
this is Add button code for reference
button id="Add" class="btn btn-default" value="Add" type="button" title="" name="Add" data-toggle="tooltip" data-placement="bottom" data-bind="click:$parent.SaveAndCloseAddressPopup, Tooltip:$parent.SaveAndCloseAddressPopup" data-original-title="Save changes and close"
driver.findElement(By.id("AddressLine1")).sendKeys("plot no-23");
this try this
driver.findElement(By.id("Address")).sendKeys("plot no-23");
as your sample code snippet for input box is
input id="Address" class="form-control" type="text" value="" name="Address" data-toggle
="tooltip" data-placement="bottom" data-bind="value:Address, ValidationMessage: Address"
data-original-title="" title=""
here you can clearly see id of the input tag is Address not AddressLine1
I have an ng-form="step1" which is populated with data from db.
When the user changes some thing in the input boxes or selects a different radio btn, I want to display a Update Button.
This button will be hidden at first.
How to do this?
Thanks for Help
use $dirty function of angularjs
example
<input type="button" class="btn btn-primary" value="update" ng-show="changedetect.$dirty" />
My understanding with forms, is that if the form has an ng-submit action associated with it, then pressing the Enter key would invoke that action, typically mimicking the click of the form's "submit" button. I have a form that does not have have a button, but a custom image of a button within a div tag and the div tag has the ng-click action. When I press Enter, nothing happens. What am I missing?
Make your button type submit and add a class attribute and style your button to make it an image like:
<form ng-submit="someAction()">
<button type="submit" class="submitbutton">Submit</button>
</form>
And do style your button in css like:
.submitbutton {
background:url('....') // your custom image
}
Then your custom image will act as the submit button and invoke the form action when click the enter key.
It worked for me by adding ng-submit, ng-controller & button type as submit
<form ng-submit="func()" ng-controller="MyController">
<button type="submit">Submit</button
</form>
if your form contains md-autofocus - remove it.
worked for me.
For Angular 13:
<form (ngSubmit)="search()">
<input type="text" id="inputword" />
<button type="submit" id="send" class="btn btn-lg btn-primary">Search</button>
</form>
Live Demo
Consider the following form:
<form>
<div>
<label>Status: </label>
<button ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id" btn-radio="status.id">
{{ status.name }}
</button>
</div>
<div>
<label>Name: </label>
<input type="text" ng-model="job.name">
</div>
</form>
When focus is on the name field, and Enter is hit, Status is set to "All Good" for some reason. Live Demo
Why is this happening? How could I stop this side effect?
From the ngForm docs:
This is because of the following form submission rules in the HTML
specification:
If a form has only one input field then hitting enter in this field
triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit]
then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons
or input[type=submit] then hitting enter in any of the input fields
will trigger the click handler on the first button or
input[type=submit] (ngClick) and a submit handler on the enclosing
form (ngSubmit)
Default type for the button element is "submit" (<button></button> === <button type="submit"></button>). Hence, when you hit enter, the first button is submitted.
To remedy, just put type="button" on your buttons.
<button
ng-repeat="status in statuses"
class="btn btn-default"
ng-model="job.status.id"
btn-radio="status.id"
type="button"
>
{{ status.name }}
</button>