I would like to have a excel-like table. I have it for all my fields except for the datepicker (http://angular-ui.github.io/bootstrap/)
When I double-click the date-field to update it, the datepicker isn't shown even if there is the autofocus on the input-field.
When I choose the date the blur event is triggered but the datepicker doesn't change the value.
If I remove the ng-blur event from the input-field the autofocus works (so if I double click on the field the datepicker appears) and the date changes, but obviously I can't catch the blur event.
The doneEditing function is used to store the changes to the DB and to make the fields editable (showing a span or an input-text).
This is the code:
<div style="width: 70px; height:30px" ng-dblclick = "startEditing(item)" ng-hide="item.editing">
<span>{{item.date | date:"dd.MM.yyyy"}</span>
</div>
<form ng-show="item.editing" ng-submit="doneEditing(item)">
<input type="text" ng-focus="focusEditing(item)" ng-blur="doneEditing(item)" class="form-control" datepicker-popup="dd.MM.yyyy" ng-model="item.date" required autofocus readonly/>
</form>
Related
I my angular application, I'm using a reset button to clear the data in a text box. But the binding is not working properly with the reset button.
<form>
<input type="text" name="email" ng-model="ch.email"><br>
<input type="reset" value="Reset">
</form>
<div>{{ch.email}}</div>
When some text is typed in the text box, it appears in the div, But after resetting, The text in the div doesn't disappears.
Please see the fiddle
You can use a button instead
HTML:
<form>
<input type="text" name="email" ng-model="changestore.sample">
<br>
<input type="button" value="Reset" ng-click="reset()">
</form>
<div id="textdisplay">
{{changestore.sample}}
</div>
JS:
$scope.reset=function(){
$scope.changestore={};
}
Working Fiddle:http://jsfiddle.net/aks0kmwe/
HTML 5 reset button won't clear the ng-model, it clears only the value from the input box
Working Example:http://jsfiddle.net/ADukg/12591/
HTML5 Reset button will only clears the input control values but not the angular ng-model values that doesn't mean it is refreshing the page but it resets html form fields to their initial values. Here is working example
Html:
<form>
<input type="text" data-ng-model="name" />
<span data-ng-bind="name"></span>
<input type="reset" value="Reset" />
</form>
Script:
var myApp=angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.name="Angular JS";
})
When you click on reset button it will clear textbox but not span tag value.After this you try to access name property value of scope using angular.element($0).scope() by doing inspect element on browser and it is still "Angular JS" only.
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
Is there any way how to trigger validation when using ngModelOptions? My use-case is to have a form with all fields updating the ngModel on submit (due to the fact that I would like to revert the whole form when user clicks on Cancel button). Having this, I cannot validate my fields instantly. Fields are validated just when the model is updated thus onSubmit. Is there any build in solution or should I use my custom implementation?
<form name="editForm" ng-submit="edit()">
<input type="text" name="text" required maxlength="140" ng-model="myObject.text"
ng-model-options="{ updateOn: 'submit' }" />
<button type="submit" ng-disabled="editForm.$invalid">
Save
</button>
</form>
What I usually do is commit the form's view value on the js code and if form is invalid then do not submit. Thus in HTML I add an on-click attribute like:
<button on-click="edit(editForm)">
And then on the javascript
edit = function(editForm) {
editForm.$commitViewValue;
if (editForm.$valid) { // submit code }
}
I'm trying to disable a input field as soon as submit button is click. The angular way suggest this:
here button is disabled when check box is checked. same way I need to disable the input field when I click button.
<input type="checkbox" ng-model="check"> </input>
<input type="checkbox" ng-disabled="check">Checkbox to be disabled</input>
IJust set/reset the variable triggering disabled on input field in the click event of button:
Search : <input ng-model="query" ng-disabled="isDisabled" />
<button ng-click="isDisabled = true;">Name</button>
JSFiddle : http://jsfiddle.net/4YtLu/108/
<input type="checkbox" ng-disabled="isDisabled">Checkbox to be disabled</input>
in your controller, on submit set
$scope.isDisabled=true;
I am new to AngularJS.
In the following fiddle, when user clicks on "This submit triggers validation. But I wanted to put this button at the end of the page" button. I could see alert/error but I want to show a custom message, which I am struggling to do it.
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="triggerSubmit()">Wanted this submit to trigger the validation to the form on which this button doesn't belong, e.g. trigger to header</a>
js fiddle link
http://jsfiddle.net/unWF3/6/
Thanks,
Kalyan Basa
To disable native browser validation add novalidate attribute to form element:
<form novalidate submit-on="myEvent" ng-submit="onSubmitted()">