In AngularJS, is there a way to mark a form that has already been submitted as unsubmitted (so it loses the ng-submitted class?
Background:
In my css, I'm using the angular validation classes to accomplish the following:
Initially, all inputs have a normal border color.
If the user modifies an input to have an invalid value, set the border color to red.
If the user clicks the submit button, set the border color of all invalid inputs to red.
I am accomplishing this like so:
input.ng-dirty.ng-invalid, .ng-submitted .ng-invalid {
border-color: #F00;
}
That works fine. Now I have a form that submits an asynchronous request, and if the server responds with a success status, I want to clear the form (and effectively reset it to its original state). The problem is when I clear the form, it still has the .ng-submitted class, so all of the required fields have a red border. However I want them all to have a normal border.
I should be able to mark all of the fields as pristine using $setPristine(), but I don't see any way to mark the form as unsubmitted. Is this possible, or do I need to create and maintain my own class for doing this?
You can reset your form and thus mark it as unsubmitted using the following piece of snippet.
Html:
<input type="button" ng-click="reset(form)" value="Reset" />
Angular Script:
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$scope.user = angular.copy($scope.master);
};
This was taken from https://docs.angularjs.org/guide/forms
Related
I want to submit a #atlaskit/form from the button outside the form. I have gone through https://atlaskit.atlassian.com/packages/core/form but no documentation regarding this
Warning: When trying to submit a form remotely, you would need to go out of your way to actually make the validation work. This is applicable to HTML forms, thus not limited by Atlaskit forms.
Read about it here:
How to force a html5 form validation without submitting it via jQuery
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
Answer:
Atlaskit form actually renders the native html form underneath. Therefore,
we can attach a ref to the Form element and then trigger submit of the form property of the current ref.
Example:
// attach the ref to form
class extends React.Component{
form = React.createRef();
render() {
<Form
ref={this.form}
{...props}
>
{children}
</Form>
}
}
Trigger submit on html form:
this.form.current.form.submit()
See example codesandox here.
I have defined kendo tooltip in following way:
<i class="fa fa-info-circle ico-tooltip" kendo-tooltip k-content="model.Description"></i>
Initially the content is ok, but when model.Description is changed and the site is not reloaded the k-content shows the old value.
After reload site by F5 there is new value, but this is not what I want to achieve.
It is possible to somehow refresh this tooltip or workaround this issue?
I had a similar issue and I debugged through Kendo's code and following solution works, in my case I wanted to show only upto 22 characters of text from my model and show full text in the tooltip, here is example code
This sample below is using Angular's 1.5 component
<div kendo-tooltip="$ctrl.selectedItemTooltip" k-content="$ctrl.selectedItemText">{{$ctrl.selectedItemText | limitTo:22}}</div>
and in JS
function fetchFromServer(){
$http.get('/myService').then(function(response){
ctrl.selectedItemText = response.data.model.text;
ctrl.selectedItemTooltip.options.content = ctrl.selectedItemText
ctrl.selectedItemTooltip.refresh();
});
}
in the tooltip options object (when you initialize the tooltip) you set function for the hide event (check documentation ) and in this function you could call refresh function
`
var tooltip = $("#container").kendoTooltip({
hide: function() {
tooltip.refresh();
}
})
`
i think this will do the trick
I have built a tabcontrol with a colors dropdown directive for each tab. I want to reset the dropdownvalue in all the tabs in one go. This is the directive:
<button class="btn btn-warning" ng-click="colors=' ' "></button>
How can I make it reset the colors value?
Plunkr: http://plnkr.co/edit/AasWSJzBWib4aRZuAoBv?p=preview
I edited your plunker a little bit by moving the script into a seperate js-file for readability.
I also moved the button inside the div in which your tabs are in so that it inherits the scope and shares the same controller.
Inside the TabCtrl I added a function which resets the colors property. You can do it either by setting the color to an empty string or deleting the color property. Choose what you prefer.
$scope.resetColors = function () {
for (i=0;i<$scope.tabs.length;i++) {
delete $scope.tabs[i].color;
//$scope.tabs[i].color = ""; --Optional instead of the above
}
}
Hopefully this solution works for you.
Plnkr: http://plnkr.co/edit/NLKVlMTPxSWV2vUwZdri
Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.
Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.
Here's a live example.
Any ideas?
Alternatively you could use the ng-mouseenter and ng-mosueleave directives.
For example:
<div ng-app="ButtonApp">
<div ng-controller="MainCtrl">
<button ng-class="buttonClass"
ng-mouseenter="onMouseEnter()"
ng-mouseleave="onMouseLeave()"> Click Me!
</div>
</div>
And in your controller:
var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){
var defaultButtonClass = ['btn','btn-foxtrot'];
$scope.buttonClass = defaultButtonClass;
$scope.onMouseEnter = function(){
$scope.buttonClass = ['btn','btn-bravo'];
};
$scope.onMouseLeave = function() {
$scope.buttonClass = defaultButtonClass;
}
}]);
You can see my JSFiddle.
To generate the button colors you could use something like Beautiful Buttons for
Twitter Bootstrappers.
I'd give it another class, say btn-reset and add the following CSS.
// the order of these two is also important
.btn-reset:hover{
background-color: Dark !important;
}
.btn-reset:active{
background-color: Darkest !important;
}
// you need this to reset it after it's been clicked and released
.btn-reset:focus{
background-color: Normal !important;
}
It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview
The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.
I have a question concerning angularJS.
I want to validate a form. If there is an error, I want do an action in order to process the data further. I.e. users has not filled all fields, but I want send the inputs nevertheless.
Thanks in advance...
You should check the $valid attribute of the form inside your controller.
<form name="newFeed">
URL: <input size="80" name="url" ng-model="newFeed.url" type="url" required>
<button ng-click="addFeed(newFeed)">Add Feed</button>
</form>
In a controller, a bound value can be interrogated for the validation status by checking the > $valid property.
$scope.addFeed = function(feed) {
if (feed.$valid) {
// Copy this feed instance and reset the URL in the form
$scope.feeds.push(feed);
$scope.newFeed.url = {};
}
};
(as taken from here).
You check the $valid attribute every time you call addFeed by pressing the submit button.