NativeScript - 如何让 RadForms 出现？答案

【问题标题】：NativeScript - How to get RadForms to appear?NativeScript - 如何让 RadForms 出现？
【发布时间】：2020-01-15 10:35:20
【问题描述】：

我正在使用 Angular 8 开发一个新的 NativeScript 项目。我正在研究构建表单的不同方式。

一种选择是使用 NativeScript 团队提供的 RadFroms。

我已经安装了这个插件： https://www.npmjs.com/package/nativescript-ui-dataform

我已按照此网页上的说明进行操作，但对我不起作用：https://docs.nativescript.org/ui/components/DataForm/dataform-overview#editors

基本上表单不会出现在主页上。

这是我重现该问题的代码： https://github.com/aquinn637/RadFormsTest

游乐场：hhttps://play.nativescript.org/?template=play-ng&id=DFKrMA

这里还有一个代码 sn-p：

主页模板

<StackLayout>

    <Labels text="Home Page"></Labels>
    <RadDataForm [source]="source"></RadDataForm>

</StackLayout>

首页组件

export class HomeComponent implements OnInit {

  ngOnInit(): void {
  }

  public source = {
    isReadOnly: false,
    propertyAnnotations: [
      {
        name: 'username',
        displayName: 'Username',
        editor: 'Text',
        validators: [ { name: 'NonEmpty' } ]
      },
      {
        name: 'password',
        displayName: 'Password',
        editor: 'Password',
        validators: [ { name: 'NonEmpty' } ]
      }
    ]
  };

【问题讨论】：

总是尝试使用Playground 来分享示例代码/项目，它比从 Github 下载和构建项目更容易调试/测试。只有在测试 Playground 不支持的插件时，您才可以选择 Github。话虽如此，Playground 支持所有 UI 插件，您只需从组件列表中拖动一个 DataForm 即可快速看到它出现，而无需编写任何代码。如果您仍有问题，请分享一个 Playground 示例，以便重现该问题。
@Manoj 谢谢。我添加了我的游乐场代码，但现在有一个不同的错误，我不知道如何修复。 play.nativescript.org/?template=play-ng&id=eacN1T&v=3
Source 应该是一个带有代表数据的键值对的对象。您似乎试图在源上分配元数据，属性名称也应该是 propertyAnnotations 而不是我猜的属性。浏览文档，你应该很好。
@Manoj 你能在答案中写下你的意思吗？
@Manoj 如何检查表单是否有效以禁用按钮？

标签： forms nativescript dataform

【解决方案1】：

您使用了错误的属性，请仔细参考文档。

HTML

 <RadDataForm [source]="source" [metadata]="metadata"></RadDataForm>

public source = {
    username: '',
    password: ''
};

public metadata = {
    isReadOnly: false,
    properties: [
        {
            name: 'username',
            displayName: 'Username',
            editor: 'Text',
            validators: [{ name: 'NonEmpty' }]
        },
        {
            name: 'password',
            displayName: 'Password',
            editor: 'Password',
            validators: [{ name: 'NonEmpty' }]
        }
    ]
};

Updated Playground

【讨论】：