Editable and required property of TextField do not work

[ShubhamJainSJ]

As per the documentation, both DatePickerField and TimePickerField are extensions of TextField but editable and required property have no effect on these fields.

I need the date and time to be set only from ngModel in certain use-case scenarios. Users should not be allowed to modify the values but as per current package, there is no way to disable GUI editing of the field.

Kindly check if these features can be added.

[tgpetrov]

Hi @ShubhamJainSJ,

Indeed the DatePickerField and TimePickerField extend TextField and its every property. However due to their specifics, their value for editable is always false. This means that when you tap on the field, it won't get focussed and the keyboard that allows manual input in the ordinary TextField will not be shown.

However, since you want to disable the option to change these fields' values through tap, you can use another TextField property - isUserInteractionEnabled. If you set it to false, taps will be ignored as they would with regular TextField.

As to required, I see no such property in TextField's API Reference, can you elaborate more?

[ShubhamJainSJ]

Hi @tgpetrov

I tried using property isUserInteractionEnabled but it did not work. Date selection dialog stills pops up when the field is tapped and date can be changed.

<DatePickerField hint="Select Start Date" [(ngModel)]="handleExceptionData.startDate" pickerTitle="Select Start Date" pickerOkText="OK" pickerCancelText="Cancel" class="apply-css" #startDateModel="ngModel" isUserInteractionEnabled="false"></DatePickerField>

For required property, I had referred following article:
https://www.nativescript.org/blog/requiring-form-fields-with-nativescript-and-angular

[tgpetrov]

Hi @ShubhamJainSJ

I apologise for the previous suggestion, it seems like it is not applicable on android, due to an issue with this property in the TextField. The property that works on both platforms and can be used to disable the fields is isEnabled. Note that it will grey the font on android, which is actually a good indication to the users that they can't change the date through that field.

I copy-pasted the snippet from the blog post you provided and replaced the TextField with DatePickerField in the demo-angular app of the plugin. Result seems as expected:

Let me know if I'm missing something.

[ShubhamJainSJ]

Thanks @tgpetrov
isEnabled property works like a charm. Exactly like how I wanted it to behave.

Regarding required property, ng classes do change and it toggles successfully from ng-invalid to ng-valid but I am not able to catch it using [(ngModel)] binding with model.valid property.

Example:

<DatePickerField hint="Select Start Date" [(ngModel)]="handleExceptionData.startDate" pickerTitle="Select Start Date" pickerOkText="OK" pickerCancelText="Cancel" class="apply-css" #startDateModel="ngModel"></DatePickerField>
<Label class="h6 text-danger" textWarp="true" *ngIf="startDateModel.control.touched && startDateModel.invalid" text="Start Date is mandatory"></Label>

Here, if DatePickerField is tapped to open date selection dialog but then instead of selecting date, Cancel button is clicked. Then, ngModel binding will remain null and startDateModel.control.touched && startDateModel.invalidLabel should become true to display error message Label. But that does not seem to work.

Note, ngModel variable value is initialised to null from ts file.

[tgpetrov]

@ShubhamJainSJ

I used the following setup to check if the CSS classes are updating as expected:

<DatePickerField required hint="select date..." [(ngModel)]="dateField" #dateElement></DatePickerField>
<Label [text]="dateElement.className"></Label>
<TimePickerField required hint="select time..." [(ngModel)]="timeField" #timeElement></TimePickerField>
<Label [text]="timeElement.className"></Label>

I managed to reproduce 2 bugs:

1. ng-untouched is always present even after popup is opened and closed
2. ng-dirty is always present if there is no initial value

[zbranzov]

Released in version 1.2.1