DatePicker cannot be set from metadata

[Robert]

If I try to set the DatePicker and TimePicker editors from metadata using Angular on iOS it crashes.

html:

<RadDataForm [source]="form" [metadata]="metadata">
<!-- some other groups and properties -->
  <TKPropertyGroup tkDataFormGroups collapsible="true" name="Main Info" hidden="false">
    <TKEntityProperty tkPropertyGroupProperties name="birth"></TKEntityProperty>
  </TKPropertyGroup>
</RadDataForm>

metadata:

// Some other properties in the propertyAnnotations array...
{
  name: "birth",
  displayName: "Birthday",
  groupName: "Main Info",
  index: 3,
  editor: "DatePicker"
},

The crash I get is:

-[__NSCFString isEqualToDate:]: unrecognized selector sent to instance 0x600000a46240

Note that all the other editors seem to be working.

 

(Honestly, I'm surprised at how many bugs I'm finding in DataForm. Quality control seems to be lacking. This doesn't inspire confidence in Telerik.)

[Robert]

Thought I'd add a note that if I add an editor in the HTML then it works as expected, but only if I remove the 'editor' value from the metadata. (It appears that metadata takes precedence over the HTML.)

[Nikolay Tsonev]

Hi,
Indeed generating the DataForm, while using metadata has some corner cases, which leads to those problems, while the component is initialized. The loading all the content with the help of JSON object is pretty new functionality and have some issues which will be fixed for some of the next versions

The main idea while creating the DataForm component is to define the structure and the needed fields from the XML and HTML depending on the used template and only the data source to be loaded via code behind.

Regarding the topic, the problem with the DatePicket and TimePicker types have been also logged here and the solution at the moment is to define the structure inside the HTML. For example:

<RadDataForm [source]="ticketOrder" tkExampleTitle tkToggleNavButton>
    <TKEntityProperty tkDataFormProperty name="movie" displayName="Movie Name" index="0" [converter]="movieConverter" [valuesProvider]="movieNames">
        <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="date" index="1">
        <TKPropertyEditor tkEntityPropertyEditor type="DatePicker"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="time" index="2">
        <TKPropertyEditor tkEntityPropertyEditor type="TimePicker"></TKPropertyEditor>
    </TKEntityProperty>
    <!-- >> angular-dataform-editors-html -->
    <TKEntityProperty tkDataFormProperty name="type" displayName="Type" index="3" valuesProvider="2D, 3D">
        <TKPropertyEditor tkEntityPropertyEditor type="SegmentedEditor"></TKPropertyEditor>
    </TKEntityProperty>
    <!-- << angular-dataform-editors-html -->
    <TKEntityProperty tkDataFormProperty name="price" index="4" readOnly="true">
        <TKPropertyEditor tkEntityPropertyEditor type="Decimal"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="numberOfTickets" displayName="Number of Tickets" index="5">
        <TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="contactName" displayName="Contact Name" index="6">
        <TKPropertyEditor tkEntityPropertyEditor type="Text"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="contactPhone" displayName="Contact Phone" index="7">
        <TKPropertyEditor tkEntityPropertyEditor type="Phone"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="contactEmail" displayName="Contact Email" index="8">
        <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="agreeTerms" displayName="I Agree with Terms" index="9">
        <TKPropertyEditor tkEntityPropertyEditor type="Switch"></TKPropertyEditor>
    </TKEntityProperty> </RadDataForm>

We will do our best to provide fix on this problem for some of the next UI for NativeScript versions and for now, you could track the progress on the issue
Regards,
nikolay.tsonev
Progress Telerik