RadDataForm 的 Angular 2 支持及新特性
2016 年 11 月 22 日 — 作者：Nikolay Diyanov
随着 nativescript-telerik-ui/pro 的最新版本发布，其 UI 和功能丰富的组件持续发展。在 1.5.0 版本中，RadDataForm 增加了新特性和更多示例，方便在常见场景中的使用。最后但同样重要的是，它获得了 Angular 2 的支持。让我们直接了解这些特性和增强功能。
数据表单设置的元数据（例如，字段的顺序、每个字段使用的编辑器等）现在可以作为一个简单的 json 文件提供，因此在必要时可以在不同的页面和表单中重复使用。
此外，我们根据您的反馈，在 示例应用程序 中添加了更多不同场景的示例，例如如何设置一些特定平台的编辑器（Slider、SegmentedEditor 等），如何编辑来自 json 文件的对象等等。
现在让我们简单地以其默认状态显示 RadDataForm，而无需修改其编辑器、验证器等。我们可以通过在 HTML 中添加 RadDataForm 并将其 source 属性绑定到模型的“数据对象”来实现：
<RadDataForm [source]="person"></RadDataForm>
这按预期工作，但现在我们想更改“person”对象的每个属性的编辑器。在 {N} + Angular 2 中，我们可以通过在 HTML 中添加 TKEntityProperty 声明并在其标签之间简单地添加 TKPropertyEditor 实例来实现。与 {N} + Angular 中的大多数指令一样，我们需要告诉 Angular 我们的自定义指令属于哪个实例。在我们的例子中，TKEntityProperty 是 RadDataForm 的一部分，这就是为什么我们可以使用 tkDataFormProperty 内联指令，而 TKPropertyEditor 属于 TKEntityProperty，这就是为什么我们使用 tkEntityPropertyEditor 内联指令：
<RadDataForm [source]="person">
<TKEntityProperty tkDataFormProperty name="name" displayName="Name" index="0"></TKEntityProperty>
<TKEntityProperty tkDataFormProperty name="age" displayName="Age" index="1">
<TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
</TKEntityProperty>
</RadDataForm>
此 HTML 将分别在 iOS 和 Android 中生成以下 DataForm 元素：
您始终可以使用 文档 了解所有可用的 RadDataForm Angular 2 指令的详细信息，以及 我们的 GitHub 存储库，其中包含一个演示应用程序，演示了在 nativescript-telerik-ui-pro 插件中使用所有控件的最常见场景。
如果您需要 ListView 和 SideDrawer 组件而不是 DataForm，则可以从 NPM 免费获取它们，作为 UI for NativeScript 免费产品的一部分。
组布局
组布局允许您更改编辑器在屏幕上的布局方式。例如，现在您可以轻松地将两个或更多编辑器放在一行上，以及/或者以整齐对齐的网格形式排列它们。 |
 |
图像标签
图像标签允许您向应用程序添加图像资源，并使用它们来提示用户每个字段的预期输入。 |
 |
数据表单设置的元数据（例如，字段的顺序、每个字段使用的编辑器等）现在可以作为一个简单的 json 文件提供，因此在必要时可以在不同的页面和表单中重复使用。
此外，我们根据您的反馈，在 示例应用程序 中添加了更多不同场景的示例，例如如何设置一些特定平台的编辑器（Slider、SegmentedEditor 等），如何编辑来自 json 文件的对象等等。
Angular 2 支持
您可以从今天开始在您的 NativeScript + Angular 应用程序中使用 RadDataForm 及其全新的布局，方法是使用其内置的 Angular 指令。您可能熟悉 Angular 2 为表单创建提供的“模板驱动”方法，如 最近的博客文章之一 所述。这在 {N} + Angular 2 中的 RadDataForm 中也适用，但增加了一些巧妙的技巧。根据设计，内置的 Angular 2 Web 表单和 RadDataForm 都使用“模板”声明来声明表单属性“editors”，区别在于，默认的 Web 表单需要您在“模板”或编辑器中指定每个元素，而在 RadDataForm 中，您可以简单地通过将 ‘TKPropertyEditor’ 的 ‘type’ 更改为例如 Text、MultilineText、Email、Password 等来使用我们众多内置编辑器之一。您可以在 此处 找到内置编辑器类型的完整列表。默认的 Angular 2 表单和 RadDataForm 之间还有许多其他相似之处，例如验证，区别在于您可以通过简单地启用我们的内置验证来使用它，而无需在较低级别处理任何其他实现。开始使用 RadDataForm + Angular 2
要开始使用 Angular 的 RadDataForm，您需要导入所需的组件指令并将其添加到您的 @NgModule 声明中。之后，只需在您的 HTML 中添加 RadDataForm 标签即可。数据表单的所有必要部分，如其实体属性、编辑器、验证器、组等，都可以通过其 Angular 2 指令（TKEntityProperty、TKMinimumLengthValidator、TKPropertyEditor 等）进行设置。现在让我们简单地以其默认状态显示 RadDataForm，而无需修改其编辑器、验证器等。我们可以通过在 HTML 中添加 RadDataForm 并将其 source 属性绑定到模型的“数据对象”来实现：
<RadDataForm [source]="person"></RadDataForm>
这按预期工作，但现在我们想更改“person”对象的每个属性的编辑器。在 {N} + Angular 2 中，我们可以通过在 HTML 中添加 TKEntityProperty 声明并在其标签之间简单地添加 TKPropertyEditor 实例来实现。与 {N} + Angular 中的大多数指令一样，我们需要告诉 Angular 我们的自定义指令属于哪个实例。在我们的例子中，TKEntityProperty 是 RadDataForm 的一部分，这就是为什么我们可以使用 tkDataFormProperty 内联指令，而 TKPropertyEditor 属于 TKEntityProperty，这就是为什么我们使用 tkEntityPropertyEditor 内联指令：
<RadDataForm [source]="person">
<TKEntityProperty tkDataFormProperty name="name" displayName="Name" index="0"></TKEntityProperty>
<TKEntityProperty tkDataFormProperty name="age" displayName="Age" index="1">
<TKPropertyEditor tkEntityPropertyEditor type="Stepper"></TKPropertyEditor>
</TKEntityProperty>
</RadDataForm>
此 HTML 将分别在 iOS 和 Android 中生成以下 DataForm 元素：
|
|
您始终可以使用 文档 了解所有可用的 RadDataForm Angular 2 指令的详细信息，以及 我们的 GitHub 存储库，其中包含一个演示应用程序，演示了在 nativescript-telerik-ui-pro 插件中使用所有控件的最常见场景。
如何获取 RadDataForm？
RadDataForm 是 UI for NativeScript Pro 的一部分。您可以从 NPM 获取免费试用版，或者，如果您在试用期间需要团队成员的支持，请从 Telerik.com 获取试用版。如果您需要 ListView 和 SideDrawer 组件而不是 DataForm，则可以从 NPM 免费获取它们，作为 UI for NativeScript 免费产品的一部分。