angular服务中使用模版html,在Angular 5中使用模板驱动的表单进行验证

最新推荐文章于 2024-03-10 12:38:17 发布

weixin_39928003

最新推荐文章于 2024-03-10 12:38:17 发布

阅读量269

点赞数

文章标签： angular服务中使用模版html

本文详细介绍了如何在Angular5中使用模板驱动的表单进行验证。首先，通过创建一个用户模型来避免命名冲突。接着，通过添加`ngModel`和`required`属性实现用户名字段的验证，并展示错误消息。然后，扩展验证到电子邮件和其他字段，确保输入有效。最后，添加了一个注册功能。文章还提到了后续将探讨自定义验证器的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

在这篇文章中，我们将看到如何在Angular 5中使用模板驱动的表单进行验证; 这只是一种可以遵循的不同方法，正如我们在前一篇文章中讨论的另一种方式。在本文结尾处，您将了解如何使用模板驱动表单在Angular 5应用程序中实现验证。本文是开发Angular 5 App系列的延续 ; 如果你还没有浏览以前的帖子，我强烈建议你这样做。您可以在下面找到以前帖子的链接。我希望你会喜欢这篇文章。

背景

验证在所有应用程序中都起着至关重要的作用，无论它以何种语言开发。由于它是一个重要部分，因此有很多方法可以实现它。我们将在这里看看模板驱动的表单方法。

使用代码

建议从GitHub克隆该项目，以便您可以尝试自己的一切。现在让我们继续写一些代码。

安装Bootstrap

在我们开始之前，让我们在我们的应用程序中安装bootstrap。

PS F:\My Projects\ng5> npm install bootstrap --save

在我们使用Angular CLI开发这个应用程序时，我们可以在我们的Angular-CLI.json文件中添加对Bootstrap的引用。添加引用后，该文件的样式部分将看起来像下面的代码。

"styles": ["styles.css","../node_modules/bootstrap/dist/css/bootstrap.min.css"]

请注意，在我们的应用程序中还有很多其他的配置Bootstrap的方法，但是在这里解释它们已经超出了本文的范围。

将ngForm导入到变量

让我们清理我们的注册组件中的代码，并添加一个新的表单，其中有一个表单变量，它可以保存我们表单的值。有很多事情可以用这个变量来做，现在让我们假设它是我们的模型值容器。

Sign upTrust us for your data, and sign up

import { OnInit, Component } from "@angular/core";@Component({selector: 'app-registration',templateUrl: './registration.component.html',styleUrls: ['./registration.component.css']})export class RegistrationComponent implements OnInit {constructor() {}ngOnInit() {}}

使用模板驱动的表单实现用户名字段的验证

正如我们创建了我们的表格，现在是时候为它生成输入控件了。

我们上面的内容是用模板驱动的表单创建一个简单的HTML文档，我们将在其中介绍验证。我们userName 现在修改该字段。

我们试图通过上面的代码实现的是创造一个参考变量 userName，以及分配 input的值给它。基本上，这是一种双向绑定，我们可以从组件中设置数据并将其更新为表单，反之亦然。现在，如果你运行你的应用程序，你应该会看到类似下面的错误。

Uncaught Error: Cannot assign to a reference or variable!at _AstToIrVisitor.visitPropertyWrite (compiler.js:26025)at PropertyWrite.visit (compiler.js:4585)at convertActionBinding (compiler.js:25475)at eval (compiler.js:27987)at Array.forEach ()at ViewBuilder._createElementHandleEventFn (compiler.js:27983)at nodes.(anonymous function) (webpack-internal:///./node_modules/@angular/compiler/esm5/compiler.js:27620:27)at eval (compiler.js:27928)at Array.map ()at ViewBuilder._createNodeExpressions (compiler.js:27927)

这是因为我们对模型和参考变量都使用了相同的名称。所以我们应该改变这一点。为此，我们创建一个用户模型(user.model.ts)并在我们的注册组件中引用它。

export class User {id: any;userName: string;email: string;userRole: string;profileImage: string;phoneNumber: string;firstName: string;lastName: string;}

import { User } from'../models/user.model'

现在我们可以改变我们的 input 如下所示。

请确保在注册组件中声明一个用户。

export class RegistrationComponent implements OnInit {user = new User();constructor() {}ngOnInit() {}}

现在，如果您运行应用程序，则只有在表单有效时才会启用提交按钮，即只有在用户名字段中输入任何值时才会启用提交按钮。

装饰验证消息

现在我们知道我们的表单工作正常，但是如果他们没有在这些字段中给出任何值，我们不需要向用户发送消息？让我们在我们的HTML中添加更多的标记。

User Name is required

我们正在动态启用这些类 has-error并 has-success 检查该userName 字段的有效和无效属性。如果我们的userName 模型中有任何必需的错误，我们也会在新的时间范围内显示我们所需的现场信息。现在，如果你运行你的应用程序，你可以看到验证工作正常。

但是，不是默认显示的验证？我们应该只显示消息，如果用户触及我们的领域，并拒绝输入任何内容，对吧？让我们加入userName.touched 我们的标记。

User Name is required

对其他字段进行验证

现在是时候在我们的应用的其他领域实施验证。

Sign upTrust us for your data, and sign up

对于电子邮件验证，我们已经给出了一个额外的属性并将条件设置为[email]="user.email !== ""; 他使得它使得所需的验证和验证电子邮件不会被一起显示。如果用户触摸该字段并且没有给出任何值，这将显示所需的消息，并且只有当输入的值不是有效的电子邮件时，电子邮件验证才会被触发。听起来不错，对吧？

添加注册功能

最后，让我们添加我们的 register 功能。

import { OnInit, Component } from "@angular/core";import { User } from '../models/user.model';@Component({selector: 'app-registration',templateUrl: './registration.component.html',styleUrls: ['./registration.component.css']})export class RegistrationComponent implements OnInit {user = new User();constructor() {}ngOnInit() {}register(user: User): void{console.log(user);}}

一旦完成，我们打开浏览器控制台并查看数据。