I want to make the angular js bootstrap datetimepicker as required field, i am using the this datepicker
https://github.com/zhaber/angular-js-bootstrap-datetimepicker I tried out with this option.
I want to validate the form, if i skip those two steps submit button should not enable.
<form name="addForm" novalidate>
<datetimepicker hour-step="hourStep" minute-step="minuteStep" ng-model="endDate" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions" date-disabled="disabled(date, mode)" datepicker-append-to-body="false" readonly-date="false"
disabled-date="false" hidden-time="true" hidden-date="false" name="endDate" invalid="true" pristine="true" show-spinners="false" readonly-time="false"
date-opened="dateOpened" show-button-bar="false" required> </datetimepicker>
<datetimepicker hour-step="hourStep" minute-step="minuteStep" ng-model="endDate" show-meridian="showMeridian" date-format="dd-MMM-yyyy" date-options="dateOptions" date-disabled="disabled(date, mode)" datepicker-append-to-body="false" readonly-date="false"
disabled-date="false" hidden-time="true" hidden-date="false" name="endDate" invalid="true" pristine="true" show-spinners="false" readonly-time="false"
date-opened="dateOpened" show-button-bar="false" required> </datetimepicker>
</div>
<button class="btn btn-primary" ng-disabled= addForm.startDate.$pristine && addForm.startDate.$invalid || addForm.endDate.$pristine && addForm.endDate.$invalid ng-click="addOffer('/offers')">Submit</button>
The library doesn't include required field. So the object is still valid with empty input
You can use addForm.endDate.$modelValue to check is it null in the submit button.
Actually the problem is in the button. Ng-disabled attribute syntax is not correct.
ng-disabled = addForm.startDate.$pristine && addForm.startDate.$invalid || addForm.endDate.$pristine && addForm.endDate.$invalid
It should be like below:=
ng-disabled = "addForm.startDate.$pristine && addForm.startDate.$invalid || addForm.endDate.$pristine && addForm.endDate.$invalid"
Missing double quote.
Thanks
Related
The date picker plugin is still working even if the field is readonly.
<input name="SpecialFields_{{::field.FieldID}}" ng-model="newUserObj.specialfields[field.FieldID]" type="text" class="DatePickerClass form-control" uib-datepicker-popup="{{format}}" datepicker-localdate is-open="popup.customDate[$index].opened" autocomplete="off" placeholder="e.g. 01-January-2000" datepicker-options="dateOptions" close-text="Close" alt-input-formats="altInputFormats" ng-required="field.RequiredField == 1" ng-readonly="field.AdminEditable && (isAdmin == 0)">
Is there any way to disable the datepicker
I think you might want to use ng-disabled="field.AdminEditable && (isAdmin == 0) instead of ng-readonly.
This will prevent changes.
I create form and use AngularJs. I need display errors and I have a problem.
My expression for ng-show doesn't work.
My code:
<form name="createProductForm" ng-submit="createProduct(product)" novalidate>
<input type="text" ng-model="product.name" ng-minlength="3" required> <br>
<p ng-show="createProductForm.product.name.$error.required && createProductForm.product.name.$dirty">Nazwa produktu jest wymagana.</p>
<p ng-show="createProductForm.product.name.$error.minlength && createProductForm.product.name.$dirty">Nazwa produktu jest zbyt krótka.</p>
<button type="submit" ng-disabled="createProductForm.$invalid">Dodaj produkt</button>
</form>
Your input tag MUST have a name attribute. ngModel does not provide validation states.
<input name="nameAttributeHere"/>
<p ng-show="createProductForm.nameAttributeHere.$error.required && createProductForm.nameAttributeHere.$dirty">...</p>
ngModel and form validation states are completely separate directives.
I have a page with a check box representing "All dates" and two input fields which represent the start date and end dates. When the page first loads the check box is unchecked. The requirement is if the check box is unchecked and there is nothing in the start and end date fields a message must display to the user.
This is what I have for the check box and input fields and the error message:
<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="$parent.vm.selectedReport.Parameters.StartDate == null || $parent.vm.selectedReport.Parameters.EndDate == null" />All Available Dates
<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.StartDate"
is-open="beginningDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.EndDate"
is-open="endDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
Please select
This is what I have in the controller at the beginning:
vm.selectAllDates = false;
This is what I have in the submit function:
if ($scope.reportForm.$valid) {
//do stuff
}
else
{
$scope.reportForm.submitted = true;
}
If the form is "valid" when I hit the submit button a modal window will display.
What's happening is the page loads and if I don't enter in dates or check the check box and I hit submit, the message appears and I can't submit which is fine.
When I check off the check box the message stays but I can submit.
When I uncheck the check box and enter dates the message stays but I can submit.
How do I hide the message once any of the conditions have been met? Sorry! I'm still a newbie at Angular.
I'm not sure this is "best practice", but you could use your form's validity to show/hide the message (since you've already setup the validation conditions).
You should be able to use something like
<p ng-show='reportForm.$valid'>Error Message</p>
Alternatively, you can manually setup a $watch on your form's validity to do any other logic you might need
$scope.$watch('reportForm.$valid', function(isValid) {
//change some value to show/hide the message
//any other logic for a change in validity
});
Okay, I figured it out.
For the checkbox I put this:
<input name="dateSelectAll" type="checkbox" ng-model="$parent.vm.selectAllDates" ng-required="vm.selectedReport.Parameters.StartDate == null && vm.selectedReport.Parameters.EndDate == null" />All Available Dates
For the start date I put this:
<input name="beginningDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.StartDate"
is-open="beginningDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
For the end date I put this:
<input name="endDate" type="text" class="form-control form-field" datepicker-popup="dd-MMM-yyyy"
ng-disabled="$parent.vm.selectAllDates"
ng-model="$parent.vm.selectedReport.Parameters.EndDate"
is-open="endDateOpened"
ng-required="$parent.vm.selectAllDates == false"
close-text="Close" />
And for the message I put this:
<div ng-show="reportForm.submitted || reportForm.dateSelectAll.$touched || reportForm.beginningDate.$touched
|| reportFrom.endDate.$touched">
<span class="error" ng-show="reportForm.dateSelectAll.$error.required || reportForm.beginningDate.$error.required || reportFrom.endDate.$error.required">Please select a Dissolved date</span>
</div>
I kept the code in the controller the same as what I put in my original post.
Thanks #ryanyuyu for answering so quickly. And thanks #DrCord for the info. I'll have to remember that!
I have datepicker ,in which i want to configure initDate so that if model value is null then datepicker show default selected date.
Here is the HTML:
<span class="input-group">
<input type="text" id="input_empdob" ng-readonly="isEmployeeRelieved" readonly placeholder="mm/dd/yyyy" min="mindobDate" max="maxdobDate" ng-change="setYearOfPassing(); setJoiningDate();" class="form-control" datepicker-popup="{{format}}" ng-model="employee.dob" datepicker-options="dateOptions" is-open="emp_dob_opened" ng-required="true" close-text="Close" name="input_empdob"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event); emp_dob_opened = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
and in controller i have configured datepicker-options like:
$scope.dateOptions = {
'init-date': new Date(1991,01,02)
};
at first time while loading it behaves fine, but when on save, when i clear model value then it does not show initDate properly as configured.
Thanks for any help.
I tried to use it too, didn't work.
so, i am using the initialization with the model.
in my controller i set it like:
$scope.initialDate: $filter('date')(new Date(), 'dd/MM/yyyy');
I have an input with type text, that I'm using to set dates:
<input ng-model="model.JoinDate"
ui-mask="{{'99/99/9999'}}"
type="text" required
ng-class="{error: form.JoinDate.$dirty && form.JoinDate.$invalid}" />
The problem is that the user can type something like 00/00/0000.
How can I validate the date, without creating a new directive?
What about using angular ui bootstrap datepicker?
http://angular-ui.github.io/bootstrap/#/datepicker
<span style="color:red" ng-show="subform6{{$index}}.$dirty && subform6{{$index}}.date.$invalid && subform6{{$index}}.date.$error">
<br> <small ng-show="subform6{{$index}}.fd_judgement_date.$error.pattern">Incorrect Format, should be DD/MM/YYYY</small>
</span>
</ng-form>