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" />
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 am dynamically creating form fields using ng-repeat. I have a div with several inputs/selects and when I click an "add" button, they gets duplicated. No problems so far. However, I also want to perform form validation when the submit button is clicked. Right now, I am doing the following to alert users a field is invalid when the submit button is pressed:
.ng-submitted select.ng-invalid, .ng-submitted input.ng-invalid {
background-color: red;
}
This works as expected provided I have not dynamically added inputs to the form. If I add new inputs to the form, .ng-submitted gets added to my form element (without submit being pressed) and all the required and invalid inputs turn red. You can see an example of this here: https://plnkr.co/edit/hDe40mBDjw9aDSDoAhe6?p=preview
Not only do I not want the inputs turning red when simply adding elements, I also don't want the form submitting unless someone has hit the submit button. There must be something I don't understand about submit with angular forms and help would be appreciated.
EDIT: further testing shows that the button element is the problem.
<button ng-click="addRow()">add</button>
This works fine however:
<input type="button" ng-click="addRow()" value="add"/>
Not sure why this is though.
The default value of the type of a button is "submit". So clicking it submits the form. Putting type="button" explicitly prevents the form being submitted when the button is clicked.
If you want to use form submit you need to use ng-submit on form and change button type to submit.
<form name="form" ng-submit="addRow()">
<div>
<div ng-repeat="row in rows track by row.id">
<input type="number" min="0" ng-model="row.id" required/>
</div>
<button type="submit">add</button>
</div>
</form>
There were multiple changes needed in your code. I have fixed them in this plunker: https://plnkr.co/edit/GEWdCo1cQPPEFJcZxT58?p=preview
I have an input field that is bound to a model object, which I don't want to bind until the user clicks a button. I went through ng-model-option and updateOn, but seems they trigger only on out of the box JS events like blur and focus.
<input ng-model="modelobject" ng-model-options="{updateOn: confirmButtonClick}">
<button id="confirmButton" role="confirm" ng-click="confirmButtonClick == true" class="confirm-btn">Confirm</button>
How can I make the value bind to the model only upon the click of the button or a custom function? Would I need to write a custom directive?
You could do solve your problem by wrapping you fields inside a form and then update ng-model on submit of a form like ng-model-options="{updateOn: 'submit'}".
HTML
<form name="myForm">
<input ng-model="modelobject" ng-model-options="{updateOn: 'submit'}">
<button id="confirmButton" role="confirm" class="confirm-btn">
Confirm
</button>
</form>
Working Plunkr
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.
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>