I am using angular-xeditable to edit elements within a form. I would like to have all the elements in "editable" mode at all times, e.g. no "edit" button needs to be pushed before the user starts editing.
I have been trying to use the $show() in my controller to enable the elements in the form, however it seems like the elements goes into viewing state again for example when using "onaftersave" when trying to save the values etc.
How do I do in order to always be in edit mode where the user never needs to enable editing in order to start editing the values?
Possibly try adding shown=true in your html:
<form editable-form shown="true">
I had this same problem. Even when trying to $show() the form again at the end of my onaftersave function it still wouldn't work. I suspect the visibility is being hidden after the onaftersave function runs but I didn't actually check if that's the case. Here's how I got around it:
$scope.$watch('yourFormName.$visible', function() {
$scope.yourFormName.$show();
});
Now whenever the form visibility changes to hidden, it will just show it again regardless of when it changed.
If your form is already open, and you just want to keep it open after submitting, you can do this:
<form editable-form name="MyForm" onbeforesave="saveMyData()" onaftersave="keepFormOpen()">
and the function keepFormOpen() would look something like this:
$scope.keepFormOpen = function() {
return "fake error message";
}
What this does is essentially gives the form a fake error message after you have already saved your data. This fake error message will interrupt the forms closing process, but since it was called after you already saved your data, it won't affect the previous submit.
To really keep open the form we can do the following:
<form editable-form name="MyForm" onbeforesave="saveMyData()" onhide="MyForm.$show()">
Related
Basic problem is, when user tabs in a specific text input on a form, prefilled "+36" gets selected. I'd like to somehow put the cursor right after it (after the +36), instead of selecting the whole word. I've been thinking about disabling text selection of text inputs but no result yet. Googled a lot for it but couldnt find anything but disabling text selection on web pages, which is not really related. How could I solve this problem?
If you are using Jquery, you can try something like this on document ready
$(document).ready(function() {
$("input").focus(function() {
var input = this;
setTimeout(function() {
input.selectionStart = input.selectionEnd;
}, 1);
});
});
Please find the Jsfiddle for the same Jsfiddle Input Focus
In your form element put autocomplete attribute like below
<form method="post" action="/form" autocomplete="off">
</form>
The application I am working on has multiple tabs, each tab contains a form with ng-submit. And they share some common fields for example: selectedService.
It's been set to required in both forms. However updating it in one form then switch to another form, Chrome wouldn't complaint it's required since it already has value, however IE 11 complaints that it's required although it already has data entered and angular indicates that it's valid as well.
Is there anyway that I can update IE to let it know that this model has been updated and it has value? Or it's the form needs re-validation?
---------------------Update--------------
I am finally able to replicate it: http://plnkr.co/edit/Gjphya?p=preview
So if you select a value in the first dropdown and click submit in the second row, it says it's required. This only happens in IE, not in Chrome or other browsers.
And I think the problem is around this line:
$scope.selectedService = null;
Thanks!
All I need to fix is to add this line in the select tag:
<option value="">Please Select...</option>
If I init the ng-model in controller, it also fix the issue, however sometimes it causes unexpected issue if the dropdown is binded to an array instead of object collection.
I added field validation attributes like "required" and "pattern" in my form, and the form is inside a ng-controller. The validation works. But it seems the validations are triggered on page load, and I see all the fields are marked as invalid with error message when the page load.
I tried to add "novalidation" attribute to the form as indicated in the examples on AngularJS website, but no luck.
I would like to have the validation triggered the first time the user tries to interact with it. How can I do that?
Update
Here's an example https://jsfiddle.net/davidshen84/00t197gx/
<div class="mdl-cell mdl-cell-6-col mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="screenname" pattern="[a-zA-Z0-9]{3,}" ng-model="comment.screenname" required/>
<label class="mdl-textfield__label" for="screenname">Screen Name</label>
</div>
On load, you should see all the input fields had a red line under them which indicate they are in the invalid state. And the line turns to blue once validated.
Note: The style on the check button does not work...should not be a concern in the problem.
Angular is going to check the form the same way at any point (load or later) and render the result. If you don't want to display the results on load, add logic to check whether the form has been interacted with. You can hide your error messages using ng-if="yourFormName.$dirty", or display according to the status of an individual field with yourFormName.yourFieldName.$dirty.
Click here for live demo.
What is currently implemented (wrong IMHO) is that MDL automatically validates input and doesn't mind "novalidate" form attribute. I had to implement check for empty input value (skip validation and remove is-invalid class) and, since angular form validation requires "novalidate" attribute, check:
if (input.form.novalidate = true) // skip validation
that way you can actually turn off mdl validation and leave everything to angular.
One more thing is actually required. You can create angular directive which validates expression and add is-invalid class if necessary:
div class="mdl-textfield" mdl-validator="form.email.$error"
I have a page with several dropdown lists and some of them may have default entries that are not valid. It's essentially the same problem that was described here:
AngularJs doesn't validate a invalid dropdown selection
However, I think there has to be a reasonable way to accomplish this without having to check everything manually in the controller. I'd like to be able to do something like this:
<select ng-model="thisEntry" ng-options="option for option in goodOptions"></select>
<span class="error" ng-show="goodOptions.indexOf(thisEntry) == -1">Please select a valid entry from the list</span>
that also sets the form invalid so the user can't submit until it's fixed . The code above actually displays the message, but I don't know how to set the form invalid at the same time, or even in an equivalent line of code. This seems like the equivalent of a blank entry on a form that's easily handled without having to resort to javascript code.
I have the following code:
<form class="form"
data-ng-submit="modalSubmit(modal.data)"
id="modal-body"
name="modalForm"
novalidate>
This works and when I click on a button of type submit then the modalSubmit function is called.
However I would like to do this in my controller:
$scope.modalForm.$setPristine();
But it gives an error saying:
has no method '$setPristine'
How I can I set the form to pristine? I did try adding data-ng-form="modalForm" but then I get
a message saying something to the effect of duplicate directive names.
I tried changing the form element to a DIV but then the clicking on the submit button does not call
the function
Here's an example (modified from another user) that shows what I am trying to do which is set values to pristine:
plnkr.co/edit/LNanJdAggMLIgxii0cfv?p=preview
You're not doing anything wrong there, only problem is you're referencing an old version of angular in which $setPristine() was not a feature. $setPristine() was added in 1.1.+, so reference a newer version of angular and you're good to go. See it working in this plunk, using 1.2.+.
If you can't upgrade, then a dirty workaround would be to loop through all inputs in the form and set their $dirty and $pristine values manually:
$scope.mp = function() {
$scope.mainForm.$pristine=true;//clean main form
$scope.mainForm.$dirty=false;
angular.forEach($scope.mainForm,function(input){//clean all input controls
if (input !== undefined && input.$dirty !== undefined) {
input.$dirty=false;
input.$pristine=true;
}
});
}
First, your version of angular was old, 1.2.12 is the latest stable on the CDN. But even it wouldn't allow $setPristine because of the HTML5 validation that was going on.
The biggest problem was you used required on the fields instead of ng-required. The browser was doing the form validation for you instead of angular. You could also add the novalidate attribute to the form tag.
http://plnkr.co/edit/l1mUCceSFMFFZWgGgL6u?p=preview
it has already been implemented in this link you can use it this was as it has been demonstrated in the plnkr link.
As you can see from the above description, $setPristine only changes the state of the form (and thereby resets the css applied to each control in the form).
If you want to clear the values of each control, then you need to do for each in code.