使用 NativeScript 和 Angular 构建必填表单字段

以下是由即将出版的《NativeScript 实战》一书的合著者 Nick Branstein 发布的客座博文。该书的前九章已上线，如果您今天使用代码 nstelerik 购买，将享受 50% 的折扣。

我从 2015 年早期 Beta 版开始就一直涉足 NativeScript，所以不用说，我已经关注 NativeScript 很长时间了，并且我非常喜欢它帮助我轻松创建 iOS 和 Android 应用程序的方式。去年在ng-conf 上，NativeScript 团队通过宣布 Angular 和 NativeScript 的集成而引起了轰动。私下里，我一直都在寻找学习 Angular 的借口，而这两个框架的结合给了我这个机会。在这篇文章中，我们将讨论将 Angular 的一项功能集成到使用 Angular 的 NativeScript 应用程序中。我假设您已经完成了一个基本的 NativeScript 和 Angular 应用程序。如果您不熟悉 Angular 及其与 NativeScript 的集成方式，那么学习起来非常快，所以前往教程，完成后再回来这里！

表单

在应用程序（移动和 Web）中，我经常做的一件事是从用户那里收集输入和数据。在 Web 应用程序中，您可以使用表单元素从用户那里捕获多个数据点。Angular 附带了许多开箱即用的功能，这些功能可直接与 Web 应用程序的表单控件一起使用，例如数据绑定、验证和错误处理。您可以在此处了解有关 Angular 表单和功能的更多信息。

在 NativeScript 应用程序中，没有像 Web 应用程序那样的原生表单元素。如果您使用 Angular 构建 NativeScript 应用程序，您仍然可以充分利用 Angular 为表单提供的功能。让我们来看看如何将此功能移植到使用 Angular 的 NativeScript 应用程序中。

使用 Angular 的 NativeScript 中的“表单”

在您的应用程序中使用双向数据绑定（通过将 NativeScriptFormsModule 导入到您的 AppModule 中完成）时，Angular 会通过将以下类应用于每个元素来自动跟踪控件的状态：ng-touched、ng-untouched、ng-dirty、ng-pristine、ng-valid 和 ng-invalid（有关更多信息，您可以查看官方 Angular 文档中的这些类）。

让我们看一个 NativeScript 视图中简单的“表单”示例

<StackLayout class="p-20">
    <Label text="Required Textfield" class="h1 text-center"></Label>
    <TextField required hint="fill this out..." [(ngModel)]="textField" #element></TextField>
    <Label [text]="element.className"></Label>
</StackLayout>

required data

如您所见，Angular 会像在网页表单中一样，将相应的类应用于 NativeScript 组件。需要注意的是，Angular 正在跟踪原生 TextField 的有效/无效状态，因为我们向其添加了 required 属性；即使 required 不是 NativeScript 公开的属性，Angular 仍然能够读取它。

字段有效性

如果我们稍微修改一下示例并获取对 TextField 的后备模型的引用，那么我们还能够读取 Angular 为我们跟踪的 valid 属性模型，以快速确定 TextField 是否已填充。

<StackLayout class="p-20">
    <Label text="Required Textfield" class="h1 text-center"></Label>
    <TextField required hint="fill this out..." [(ngModel)]="textField" #element #elementModel="ngModel"></TextField>
    <Label [text]="element.className"></Label>
    <Label [text]="elementModel.valid"></Label>
</StackLayout>

required textfield

收尾工作

由于我们知道可以在 NativeScript 应用程序中利用 Angular 2 来跟踪我们想要要求的字段，因此让我们完成将 Angular 2 示例移植到 NativeScript 应用程序的过程。首先，我们可以根据 Angular 2 创建的类来为我们的 TextField 应用样式。

.ng-valid[required] {
    border-left-color: #42A948; 
    border-left-width: 3;
}
.ng-invalid {
    border-left-color: #a94442; 
    border-left-width: 3;
}
.validation {
    background-color: #a94442;
    color: #ffffff;
}

接下来，如果字段无效，我们可以显示/隐藏页面上的保存按钮。

<StackLayout class="p-20">
    <Label text="Required Textfield" class="h1 text-center"></Label>
    <TextField required hint="fill this out..." [(ngModel)]="textField" #element #elementModel="ngModel"></TextField>
    <Label class="validation" [visibility]="elementModel.valid ? 'collapse' : 'visible'" text="Field is required" ></Label>
    <Label [text]="element.className"></Label>
    <Label [text]="elementModel.valid"></Label>
    <Button [visibility]="elementModel.valid ? 'visible' : 'collapse'" text="Save" class="btn btn-primary"></Button>
</StackLayout>

结果！

result

在这篇文章中，我们讨论了如何使用 Angular 表单来要求字段。您可以在GitHub上获取此示例的完整代码。