Currently I have two date inputs. I am trying to make the second date input default to the first date input. The user can then change the second date input to be a different value (leaving the first unchanged).
The second date input is updating fine when I change my first date, however, the ng-model isn't modelling the value change to the form_data.to_date attribute and so this is resulting in the form still being invalid even though both required fields have been filled out.
Here is an example of the issue:
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.form_data = {
from_date: '',
to_date: ''
};
$scope.f = function() {
setTimeout(function() { // delay to show that to_date is not updating
console.log($scope.form_data);
}, 1000);
}
});
angular.element(document).ready(() => {angular.bootstrap(document, ['myApp']);});<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="myController">
<form name="myForm">
<input type="date"
ng-model="form_data.from_date"
name="from_date"
ng-change="f()"
required />
<input type="date"
ng-model="form_data.to_date"
name="to_date"
ng-value="form_data.to_date || form_data.from_date | date: 'yyyy-MM-dd'"
required />
<p>Form invalid: {{myForm.$invalid}}</p> <!-- Should be false when first date is changed -->
</form>
</div>How can I get the ng-model on the second date input to model its changes when the value is changed in the first input?
This is because you are using ng-value="form_data.to_date || form_data.from_date | date: 'yyyy-MM-dd'" i.e. if form_data.to_date exists then assign it, if not then assign form_data.from_date but it won't update the value of ng-model.
To do this you can modify your code like this:
angular.module('myApp', [])
.controller('myController', function ($scope) {
$scope.form_data = {
from_date: '',
to_date: ''
};
$scope.f = function () {
setTimeout(function () { // delay to show that to_date is not updating
if ($scope.form_data.to_date == "") {
$scope.form_data.to_date = $scope.form_data.from_date;
}
console.log($scope.form_data);
$scope.$apply();
})
}
});
angular.element(document).ready(() => { angular.bootstrap(document, ['myApp']); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller="myController">
<form name="myForm">
<input type="date" ng-model="form_data.from_date" name="from_date" ng-change="f()" required />
<input type="date" ng-model="form_data.to_date" name="to_date"
ng-value="form_data.from_date | date: 'yyyy-MM-dd'" required />
<p>Form invalid: {{myForm.$invalid}}</p> <!-- Should be false when first date is changed -->
</form>
</div>