Hi, I am using Angular v5.0.4 project and added below code to style.css to do some generic form level validations.
.ng-valid[required], .ng-valid.required {
border-left: 2px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 2px solid rgba(255, 106, 0, 0.56); /* orange */
}
Input controls don't have any problem. But DatePicker, Select and primeNg inputMask controls doesn't work with Angular form validations.
DatePicker:
<input datePicker type="datetime" name="EffectiveDate" #effectiveDate required class="form-control" [(ngModel)]="effectiveDate" (ngModelChanage)="selectedDateChange()" [(selectedDate)]="effectiveDate" >
[attachment=2:1ru5l6p1]EffDt Pic1.PNG[/attachment:1ru5l6p1] It does perform form validations but once the date is selected, the date control is not formatted as specified (see above image). If I remove [(ngModel)] then it doesn't apply form validation but formats properly(below). [attachment=1:1ru5l6p1]EffDt Pic2.PNG[/attachment:1ru5l6p1]
Select: I think the problem is with jq-plugin. If I remove the jq-plugin="selectpicker", form validation works properly. Hope you guys suggest a solution.
<select #LookupTableCombo
class="form-control bs-select"
[(ngModel)]="selectedComboValue"
(ngModelChange)="selectedComboValueChange.emit($event)"
[attr.data-live-search]="true"
jq-plugin="selectpicker">
<option value="0">{{emptyText}}</option>
<option *ngFor="let lookupvalue of lookupvalues" [value]="lookupvalue.listId">{{lookupvalue.descriptionEn}}</option>
</select>
PrimeNG: I have no luck with any of their components. Instead of having that orange line on input control, its placed beside label. Thats really weird. I think I may have to get ride of PrimeNG component.
<p-inputMask mask="(999) 999-9999? x99999" name="PhoneNumber" #phoneNumber="ngModel" [(ngModel)]="phoneNumber" required placeholder="(999) 999-9999? x99999" styleClass="form-control"></p-inputMask>
[attachment=0:1ru5l6p1]PrimeNG input mask Pic1.PNG[/attachment:1ru5l6p1]
Hope you guys suggest some solutions for these issues. Appreciate your response.
Thanks
4 Answer(s)
-
0
It's because the datepicker widget directive is just a jquery proxy that does not care about Angular form validation at all. Actually most part of Metronic's components is made this way and Metronic was never really meant for Angular. They should have switched to angular material or prime-ng, but this is only 5 cents.
Just use google and find Yourself a suitable datepicker for Angular.
-
0
as @easyest says datepicker is a jquery plugin.
-
0
Any suggestions on native angular date picker component which works seamlessly with ASPNETZERO / Metronic.
Thanks
-
0
Hi,
There are two alternatives;
<a class="postlink" href="https://valor-software.com/ngx-bootstrap/#/datepicker">https://valor-software.com/ngx-bootstrap/#/datepicker</a> <a class="postlink" href="https://www.primefaces.org/primeng/#/calendar">https://www.primefaces.org/primeng/#/calendar</a>
But we haven't tried them.
