I'm using Angular Moment Picker in my project. When it comes to edit page, ng-model value should be overwrite by data from API, howerver the values does not overwrite to moment picker ng-model anyway instead of bind the ng-model value with undefined. If i remove moment-picker it does working. Below is the demo for my situation.
JSFiddle
View
<input name="time_of_time"
class="form-control"
placeholder="Select a time"
ng-model="scheduler.timeOfTime"
ng-model-options="{updateOn: 'blur'}"
moment-picker="scheduler.timeOfTime" //Working if remove this line
format="HH:mm">
Controller
myApp.controller('HomeCtrl', function ($scope) {
$scope.scheduler = {};
$scope.scheduler.timeOfTime = '11:10';
console.log($scope.scheduler);
I was having the same problem.
This comment help me.
https://github.com/indrimuska/angular-moment-picker/issues/92#issuecomment-263669991
From the link. There are 2 way to do it.
1. Using formatted string date coming from moment-picker attribute
<input moment-picker="ctrl.formattedDate"
ng-model="ctrl.momentDate"
ng-model-options="{ updateOn: 'blur' }"
format="DD MMM YYYY"
start-view="month">
<!-- Use `ctrl.formattedDate` anywhere -->
Formatted date: {{ ctrl.formattedDate }}
2. Retrieving the formatted date using the Moment.js object
remove parameter from moment-picker
<input moment-picker
ng-model="ctrl.momentDate"
ng-model-options="{ updateOn: 'blur' }"
format="DD MMM YYYY"
start-view="month"
change="ctrl.setFormattedDate(newValue)">
<!-- Use `ctrl.formattedDate` anywhere -->
Formatted date: {{ ctrl.formattedDate }}
And in your controller
ctrl.setFormattedDate = function (momentDate) {
// do you stuff.. and
ctrl.formattedDate = momentDate.format('DD MMM YYYY');
};
I end up go with method 2.
Hope this help.
Related
I have a requirement to pre-populate an input field with the value of another input field. So, once the first field loses focus, the second field gets the same value. The field is editable, but initially, it has the value of the first field. I've found that the ngModel of the second field is not updated.
I do this to set the value of the second field:
$("#" + fieldId).val(newstring);
Here's the HTML for the first field:
<td class="formLabel" vAlign="top" align="left">
<input validate-date-time val-type="date" val-start="true" val-end-id="endDate" id="startdate" size="10" max="10" width="20" ng-model="newEvent.startDate">
mm/dd/yyyy
</td>
Here's the HTML for the second field:
<td class="formLabel" vAlign="top" align="left">
<input size="10" validate-date-time val-type="date" id="endDate" max="10" width="20" ng-model="newEvent.endDate">
mm/dd/yyyy
</td>
This is done in a directive, by the way. Any pointers on how to make this work?
I've tried calling scope.$apply and scope.$digest after setting the input val to no avail. And if I shouldn't use jQuery, whats the angular way of setting the value?
Thanks
Try something like this:
// in the controller, add
$scope.isStartDateInitialized = false;
$scope.onStartDateSet = function() {
if (!$scope.isStartDateInitialized) {
$scope.isStartDateInitialized = true;
$scope.newEvent.endDate = $scope.newEvent.startDate;
}
};
<!-- add the following attribute to the start date input -->
<input ... ng-blur="onStartDateSet()" />
NOTE 1: The above code assumes that you only want to programmatically update the end date the very first time the start date is set. If you want it to always be set to the start date when the start date changes, then you can use ng-change instead of ng-blur.
NOTE 2: You should remove the following JQuery code that you mentioned:
$("#" + fieldId).val(newstring);
The value of my inputfield is set but why is my inputfield still empty ? I am using a combination of laravel en angular :
inputfield html :
<input
type="text"
name="name"
value="{{ old('name') }}"
ng-model="name"
ng-model-options='{ debounce: 300 }'
class="form-control"
ng-class="{ enabled : nameIsValid }"
ng-change="checkName(name)"
placeholder="Your nickname"
required>
It is hard to tell the reason if you don't put your controller code in here. But here are some assuptions from my part:
you don't need to set the value if you bind an input-field with ng-model.
rather then ng-change I would use a $scope.$watch() function
are you using more than one scope in this template? maybe changes made by the child-scope aren't altering the original variable of the $parent-scope
I have a datetimepicker.
Overall, it works fine and updates the text box fine. However, when I place a ng-model onto the input field, nothing gets passed through to the binding at the bottom of the page.
Here!s the form I'm using :
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' ng-model="package.timeA" value="" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
This is my JS code :
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
For the input box give some id or class name then initialize datepicker with that id or class
<input type='text' ng-model="package.timeA" value="" class="mydatePicker form-control" />
$('.mydatePicker ').datetimepicker();
It will work.
You can try to use $apply who allow to force reload of the variable and $setViewValue who allow to set the variable of the view.
add ng-change on your input tag and pass the date.
In your controller you can make a function like this:
$scope.onChange = function(package.timeA)
{
$scope.$apply(function (){
YourCtrl.$setViewValue(package.timeA)
}
}
I'm trying to get a date, which is displayed in an input of the bootstrap ui datepicker as pure text. Therefore I use a span.
Now I want to get the text of the span, but it doesn't work. Actually, I get an undefined. Do you have some tips for me?
HTML
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2020-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span ng-model="textDate">{{dt | date:'dd.MM.yyyy' }}</span>
JS
$scope.$watch('dt', function() {
var tD = $scope.textDate.value;
console.log(tD);
});
Inject $filter into your controller/service and extract the date as a string like so
$scope.getDate = function() {
return $filter('date')($scope.dt, 'dd.MM.yyyy');
}
Plunkr here
Side-note: Assuming that dt already has two-way binding, I don't think it's necessary to $watch for changes. Instead, you can directly use $filter('date')($scope.dt, 'dd.MM.yyyy') where you need the string value.
Angular's ngModel won't work on a span since it is read only. You need some kind of input for two-way-binding with a ng-model. For this you could use a binding to a getter/setter of the model used on the input field. Here is an example:
<input type="text" name="userName"
ng-model="vm.dt"
ng-model-options="{ getterSetter: true }" />
<span ng-bind="vm.dt()"></span>
By adding ng-model-options="{ getterSetter: true }" will expose the model to a getter/setter which is a function you can simply call on your span. Also I would recommend to use the controllerAs syntax to avoid problems with scopes. Notice the vm is the alias for the controller around the input and span.
For more information check the documentation on ngModel.
I have a pattern on my controller
$scope.pattern = {
name: /[a-zA-Z]{5,}/
}
On the view
<input type="text" name="name" data-ng-model="name" ng-model-options="{ updateOn: 'blur' }" ng-pattern="pattern.name" required />
<div ng-show="contactForm.name.$dirty && contactForm.name.$invalid">
<span ng-show="contactForm.name.$error.required">The name field is mandatory</span>
<span ng-show="contactForm.name.$error.pattern">The name must be at least 5 characters long</span>
</div>
I want the field to be validate only when it looses the focus but it doesn't it validates every time I press a button.
ngModelOptions was introduced only in Angular 1.3.x
https://docs.angularjs.org/api/ng/directive/ngModelOptions
If you want to use similar functionality in Angular 1.2.x, check out this poly fill:
https://github.com/fergaldoyle/modelOptions