Is there a directive onblur for editable-form? I can't seem to find one. angular has this ngTouch but it only validates a single input. What I really want is to know if the user loses focus on the form itself.
my code is something like this [editable-form][1]
but when the user clicks on the different form the editable form will trigger the editableForm.$cancel() method.
http://jsfiddle.net/NfPcH/81/
I've got the solution, you only need to add the tag blur='cancel' on <form editable-form name="editableForm" onaftersave="saveUser()" blur="cancel">
Related
I have a multi-part form, and I was hoping to have an external next/prev navigation for it. However, I need to be able to validate each part of the form when I navigate to next.
I have the following sample form definition:
<form layout="column" name="nProfileForm1">
<md-input-container>
<label>City</label>
<input ng-model="profile.city" required="" name="nCity">
<div ng-messages="nProfileForm1.nCity.$error" ng-if="nProfileForm1.nCity.$touched&&!nProfileForm1.nCity.$valid">
<div ng-message="required">City is required.</div>
</div>
</md-input-container>
</form>
If the field is interacted with,then validation is working find and error text is correctly shown. However, I cant figure out a way to trigger the validation of all the form fields if external event takes place. It seems somewhat wrong to add own submit button to every form part. What I am looking for is something similar to what schema-form does:
$scope.$broadcast('schemaFormValidate')
Any ideas would be appreciated.
Essentially, int he following example I want the field to light up with red once I press next:
http://codepen.io/Vladimir_M/pen/OWEjOd
UPDATE: updated codePen to include one solution that I've found.
After some attempts I've found one way to achieve the effect I was after with minimal code. Getting the form's scope and setting the form's $submitted property to true does the trick. It evaluates the entire form.
$scope.doSubmit = function(){
var formScope = angular.element(nProfileForm1).scope();
formScope.nProfileForm1.$submitted = true;
}
Feel free to suggest better ways.
I use angularjs and xeditable in my application. I would like to change the behaviour of editable textarea and editable text to allow the validation when the user click outside.
It will be better with an example :
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()">{{item.label.text}}</span>
With this code, we can't see the buttons to validate and to cancel our choice. Moroever the enter key doesn't validate, so it's impossible for the user to validate his choice.
What I want to do is changing the behaviour of the enter key to validate the new text. And I want to add the possibility for the user to change text and when he click outsite the textarea, the new text will be save.
The problem is I have no idea of how to do that even after reading all the documentation of xeditable and I didn't find the solution on any forum.
Do you have an idea of how can I do that ?
Thank you in advance
You can add the blur attribute with submit value and couple it with onbeforesave attribute:
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()" blur="submit" onbeforesave="validate($data)">{{item.label.text}}</span>
Example Fiddle: http://jsfiddle.net/NfPcH/8269/
My use case is rather simple. I'm using the typeahead directive as a search box and want to manually clear/hide its dropdown when hitting enter (and you haven't selected anything) - much like Google does it.
P.S. the text in my search box needs to remain intact when clearing the dropdown
You have to wrap the typeahead element in a form. If you do that the typeahead will submit the form. If you add an ng-submit directive you can put your desired behaviour in there.
<form ng-submit="search(query)">
<input type="text" ng-model="query"
typeahead="foo as foo for foo in bars"
typeahead-on-select="onSelect($item)"
typeahead-focus-first="false"
/>
</form>
Tested with version 0.12.0 of angular-bootstrap. See the comments in a related issue: https://github.com/angular-ui/bootstrap/pull/2916:
the expected behavior is that the outer form is submitted when hitting enter from the input and nothing is focused
Simply execute the beow code will close the UI Typeahead list/ dropdown unless it doesn't harm your application:
$('body').click();
I'm using django in the back-end. I need to submit a form with a language parameter and refresh the page to change the language in the front-end.
I've got a select tag which is nested inside a form.
<form>
...
<select name="language" ng-model="selectedLanguage" ng-options="language in languages" ng-change="changeLanguage()">
...
</form>
I'd like to submit the form on select change event, what's the best way to do it with angularjs?
The $event object is not available for the change event (angular 1.3.0).
Have a $scope.$watch for selectedLanguage and call the submit function whenever it changes.
Edit
In case you want to do form submit
you can use angular.element.find to find your form.
( But im not sure why you need angular in case you are making a form submit)
I'm really confused. I want to make a sort of a hotkey that changes the value of a hidden input field and submits the form. How can I do that? I've read numerous blogs and tutorials but all assume that I just want to submit the filled form after pressing enter. While I just don't understand how the very "structure" of a form acts in javascript.
Should I fill the hidden input like this:
document.getElementById('foo').value='bar'
I don't think there's even a way to see if its value was changed so I'm not sure.
And then, how do I submit the form, if I have:
<form name='myform' method='post' action='url.html'>
I tried document.myform.submit() and document.myform.form.submit(), and I've also tried giving the form an id and using document.getElementById('myformid').submit() but none of these work! I usually get the error TypeError: 'undefined' is not an object.
I'm new to javascript, I'm used to working with python but it has a completely different philosophy, and maybe that's the source of my confusion. I'd very appreciate some explanation, not just a code snippet.
Thanks!
You can always check the hidden field with the Development Tools of your Browser - just press F12 and you will see it. Go to the DOM list (within the Development Tool) and then you see the actual value of that field.
To submit a form via JavaScript normally document.name.submit() is enough. Another option is that you use e.g. jQuery to submit a form via AJAX (with the help of jQuery.serialize)
If you want to use document.getElementById('myformid').submit() you have to give an ID to your form like that :
<form name='myform' id="myform" method='post' action='url.html'>
It's the same thing about your hidden field.
document.getElementById('foo').value='bar' assume you have an hidden like that :
<input type="hidden" name="foo" id="foo" />
You can try the following approach
<form name='myform' method='post' action='url.html'>
// your fields here
// then use a input type button to have a button and define an on click event
</form>
<script type = "text/javscript">
use the event in your script
//change your hidden field value here and
// submit the form by
myform.submit();
</script>
You can use ajax or jquery as there is a function named on key up it means after pressing a key on the last field which ever you choose as you leave the key on keyboard it will submit the forms.
check this okay http://www.w3schools.com/php/php_ajax_livesearch.asp