如何将 rad 数据表单文本输入居中？答案

【问题标题】：How to center rad data form text input?如何将 rad 数据表单文本输入居中？
【发布时间】：2019-04-12 20:57:00
【问题描述】：

我想在 rad 数据表单中居中对齐文本，因为我有这些要求。输入必须居中。

我尝试通过设置 text-align 属性来使用 css 来做到这一点。我在文档中查找了一种方法，但没有示例。

<RadDataForm #myLoginForm row="1" col="0" [source]="loginForm" [metadata]="loginFormMetadata">
        <!--Email property-->
        <TKEntityProperty
            tkDataFormProperty
            textAlignment="center"
            displayName=""
            name="email"
            hintText="Email"
            index="0">

            <TKPropertyEditor tkEntityPropertyEditor type="Email"></TKPropertyEditor>

            <!--Non empty, and email validators-->
            <TKNonEmptyValidator tkEntityPropertyValidators></TKNonEmptyValidator>
            <TKEmailValidator tkEntityPropertyValidators></TKEmailValidator>
        </TKEntityProperty>

输入总是从左到右开始，而不是居中输入，光标不移动但文本在输入字符时向左移动。

更新 -

我使用了 Manoj 的建议，并且能够使用 Native API 获得居中的文本输入。我想出了如何使用此链接在我的 NS Angular 项目中使用本机 API： https://docs.nativescript.org/angular/core-concepts/accessing-native-apis-with-javascript#intellisense-and-access-to-the-native-apis-via-typescript

之后，我可以使用事件绑定将 RadDataFrom 绑定到函数。

<RadDataForm #myLoginForm row="1" col="0" [source]="loginForm" [metadata]="loginFormMetadata" (editorUpdate)="dfEditorUpdate($event)">

谢谢马诺！

【问题讨论】：

标签： angular nativescript

【解决方案1】：

你必须自己设置样式，参考docs here

export function dfEditorUpdate(args: DataFormEventData) {
    const editor = args.editor;
    switch (args.propertyName) {
        case "albumName":
            if (isAndroid) {
                editor.getEditorView().setGravity(android.view.Gravity.CENTER_HORIZONTAL);
            } else {
                editor.editor.textAlignment = NSTextAlignment.Center
            }
            break;
    }
}

Playground Sample

【讨论】：