如何在 Angular Forms 中显示验证或错误消息
介绍
Angular 使构建 Web 应用变得更加容易。Angular 结合了依赖注入和声明式模板，并集成了解决开发问题的最佳实践。
表单是任何应用中最常见的功能之一。用户可以使用表单登录、预订航班或订餐。您可以通过验证用户输入的准确性来提高整体数据质量。
本指南将介绍如何使用 Angular 表单显示验证或错误消息。
创建一个新的 Angular 项目
使用以下命令全局安装 Angular。
npm install -g @angular/cli
然后输入以下命令来创建一个新的 Angular 项目。
ng new ngValidation
添加一些文件并安装一些依赖项。导航到根应用程序目录并输入以下命令来启动服务器。
cd my-app
ng serve --open
您将创建一个具有单个输入的表单，以了解 Angular 表单。首先，您必须在app.module.ts中包含反应式表单。
// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
imports: [
BrowserModule, ReactiveFormsModule
],
现在，我们可以添加下面的代码来显示表单。
<div style="text-align:left">
<h1>
Welcome to {{title}}!!
</h1>
<form [formGroup]="myForm" novalidate>
<div class="form-group">
<label class="center-block">Username:
<input class="form-control" formControlName="username">
</label>
</div>
<div *ngIf="myForm.controls['username'].invalid && (myForm.controls['username'].dirty || myForm.controls['username'].touched)" class="alert">
<div *ngIf="myForm.controls['username'].errors.required">
Please enter username
</div>
</div>
</form>
<p>myForm value: {{ myForm.value | json }}</p>
<p>myForm status: {{ myForm.status | json }}</p>
</div>
您还需要更新app.component.ts文件。
// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'My Angular Form Validation Example';
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.myForm = this.fb.group({
username: ['', Validators.required ]
});
}
}
模板驱动表单
您可以使用表单指令在 Angular 模板语法中创建模板驱动表单。按照以下步骤构建模板驱动表单：
创建一个具有初始表单布局的新 Angular 组件。
为每个表单控件添加要绑定的数据属性，并为每个表单输入控件添加一个属性。
显示/隐藏验证消息。
使用ngSubmit处理表单提交。
可选：添加功能以最初禁用提交按钮并仅在表单有效后启用。
响应式表单
响应式表单用于创建包含响应式样式的表单。Angular 响应式表单支持响应式编程，它支持对非 UI 数据模型（通常从服务器检索）和面向 UI 的表单模型（包含屏幕上 HTML 控件的状态和值）之间的数据流进行详细管理。响应式表单提供了使用响应式模式、测试和验证的便利性。
我们来看一个例子。
// app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular Form Validation Tutorial';
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.createForm();
}
createForm() {
this.myForm = this.fb.group({
username: ['', Validators.required ]
});
}
}
这里，您需要从@angular/forms 导入一些模块。
- 表单组
- 表单生成器
- 验证器和 ReactiveFormsModule
// app.component.ts
constructor(private fb: FormBuilder) {
this.createForm();
}
使用 FormBuilder 来处理验证。在构造函数中创建一个包含所有验证规则的表单。
// app.component.ts
createForm() {
this.myForm = this.fb.group({
username: ['', Validators.required ]
});
}
在此代码中将验证规则分配给表单对象。
<form [formGroup]="myForm" novalidate>
<div class="form-group">
<label class="center-block">Username:
<input class="form-control" formControlName="username">
</label>
</div>
<div *ngIf="myForm.controls['username'].invalid && (myForm.controls['username'].dirty || myForm.controls['username'].touched)" class="alert">
<div *ngIf="myForm.controls['username'].errors.required">
Please enter username
</div>
</div>
</form>
<p>Form value: {{ myForm.value | json }}</p>
<p>Form status: {{ myForm.status | json }}</p>
结论
现在您已经了解了模板驱动表单和响应式表单。当用户触摸任何输入字段但未输入值时，将显示一条错误消息。同样，当用户模糊输入字段而未输入值时，将显示一条错误消息。因此，我们能够显示表单字段的验证消息。
了解更多
探索 Pluralsight 的这些 Angular 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~