I am currently facing an issue with my date inputs. I want the second date input to default to the value of the first date input, allowing the user to change only the second date if needed.
Although the second date input updates correctly when I modify the first date, the ng-model does not reflect this change in the form_data.to_date attribute. As a result, the form remains invalid even though both required fields are filled out.
To illustrate the problem, consider the following example:
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 ensure that the ng-model on the second date input reflects changes when the value in the first input is updated?