RadDataForm lowercase in field email

Question

In field email:

<TKEntityProperty v-tkDataFormProperty name="email" displayName imageResource="res://user" hintText="Email" index="0">
  <TKPropertyEditor v-tkEntityPropertyEditor type="Email">
    <TKPropertyEditorStyle v-tkPropertyEditorStyle labelWidth="4" />
  </TKPropertyEditor>
  <TKEmailValidator v-tkEntityPropertyValidators errorMessage="Invalid email"></TKEmailValidator>
</TKEntityProperty>

Can set autocapitalizationType="none" in RadDataForm on Nativescript?

Every time digit first letter is capitalization, i want lowercase. — snakom23, Jun 03 '19 at 14:52
try type='url' or something like that. it must work and if it didn't work then below is the elaborate answer. — Vikas Acharya, Jun 04 '19 at 11:00

score 1 · Answer 1 · answered Jun 04 '19 at 06:22

As of today it's an open feature request, you might want to upvote the issue and follow up there.

Still you can access the native editor object and turn off auto capitalization.

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <RadDataForm :source="person" @editorUpdate="onEditorUpdate">
            <TKEntityProperty v-tkDataFormProperty name="email">
                <TKPropertyEditor v-tkEntityPropertyEditor type="Email">
                    <TKPropertyEditorStyle v-tkPropertyEditorStyle />
                </TKPropertyEditor>
            </TKEntityProperty>
        </RadDataForm>
    </Page>
</template>

<script>
    import Vue from "nativescript-vue";
    import RadDataForm from "nativescript-ui-dataform/vue";
    Vue.use(RadDataForm);

    import * as application from "tns-core-modules/application";

    export default {
        data() {
            return {
                person: {
                    email: ""
                }
            };
        },
        methods: {
            onEditorUpdate: function(args) {
                if (args.propertyName === "email") {
                    if (application.ios) {
                        args.editor.editor.autocapitalizationType =
                            UITextAutocapitalizationType.None;
                    }
                }
            }
        }
    };
</script>

Playground Sample

I believe your issue should be only with iOS, on Android by default its lower case.

score 0 · Answer 2 · answered Nov 12 '20 at 19:25

I just wanted to post an answer that also shows how to change the keyboard for both Android and iOS in case it helps anyone. I'm using NativeScript 7 with Angular and TypeScript (but you can also just use regular JavaScript) and I got it working by accessing the native elements of iOS and Android used under RadDataForm. I was also able to figure out the types for TypeScript which was really nice to see all the different InputType's available*:

<RadDataForm [source]="item" (editorUpdate)="onEditorUpdate($event)">
    <TKEntityProperty tkDataFormProperty name="description"></TKEntityProperty>
</RadDataForm>

import { DataFormEventData } from 'nativescript-ui-dataform';
import { ios } from '@nativescript/core/application';

// ... inside an Angular component
  public onEditorUpdate(dataFormEvent: DataFormEventData): void {
    if (dataFormEvent.propertyName === 'descriptionProperty') {
      if (ios) {
        const iosTextField = dataFormEvent.editor as UITextField;
        iosTextField.autocapitalizationType = UITextAutocapitalizationType.None;  // "Sentences", "Words", "AllCharacters", or "None"
        iosTextField.autocorrectionType = UITextAutocorrectionType.Yes;  // "Yes", "No", or "Default"
      } else {
        const textEditor = dataFormEvent.editor as com.telerik.widget.dataform.visualization.editors.DataFormTextEditor;
        const androidEditText = textEditor.getEditorView() as android.widget.EditText;
        androidEditText.setInputType(android.text.InputType.TYPE_TEXT_VARIATION_NORMAL);  // Many difference choices see Android docs: https://developer.android.com/reference/android/text/InputType
      }
    }
  }

*Android InputType choices, see Android docs: https://developer.android.com/reference/android/text/InputType

RadDataForm lowercase in field email

2 Answers2