在 Angular 5 应用中实现验证

Sibeesh Passion

5.00/5 (1投票)

2017年12月3日

CPOL

3分钟阅读

8401

如何在 Angular 5 应用中实现验证

下载源代码

引言

这篇文章是 **开发 Angular 5 应用** 系列课程的延续。如果你还没有阅读过之前的文章，我强烈建议你先阅读一下。你可以在下面找到之前文章的链接。在本文中，我们将 Angular 5 注册表单中实现双向绑定和验证。因此，在本文结束时，你将精通如何在 Angular 中进行验证。我希望你会喜欢这篇文章。

开发 Angular 5 应用系列

以下是本系列文章。请继续查看。

源代码

你可以随时克隆或下载这里的源代码。

背景

验证在所有应用程序中都起着至关重要的作用，没有验证，任何人都可以将无效数据推送到你的应用程序。因此，在这里，我们也将实现一些验证，这是我们的应用程序，我们希望使其完美，对吗？

Angular 中的验证

要开始使用 Angular 表单，我们需要将一些模块导入到我们的 *app.module.ts* 中。

import { FormsModule, ReactiveFormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    RegistrationComponent,
    HomeComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatButtonModule, MatCardModule, MatInputModule, MatSnackBarModule, MatToolbarModule,
    FormsModule, ReactiveFormsModule,
    RouterModule.forRoot(myRoots)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

在我们之前的文章中，我们已经在名为 Registration 的组件中开发了一个 Angular 表单。现在让我们打开 *registration.component.ts* 文件并导入 FormBuilder，Validators。

import { FormBuilder, Validators } from '@angular/forms';

让我们在我们的构造函数中注入 FormBuilder。

constructor(private fb: FormBuilder) {}

接下来是构建一个 form 组，以便我们可以将我们的模型包含在其中。

form;
  constructor(private fb: FormBuilder) {
    this.form = fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    });
  }

在 group 模型中，第一个参数是你可能需要显示的初始值。你总是可以像这样操作

firstName: ['Sibeesh', Validators.required]

我们还需要在我们的 *registration.component.html* 中进行更多更改。

<mat-card>
 <form [formGroup]="form">
 <mat-input-container>
 <input matInput placeholder="First Name" formControlName="firstName" />
 </mat-input-container>
 <mat-input-container>
 <input matInput placeholder="Last Name" formControlName="lastName" />
 </mat-input-container>
 <mat-input-container>
 <input matInput type="email" placeholder="Email" formControlName="email" />
 </mat-input-container>
 <mat-input-container>
 <input matInput type="password" placeholder="Password" formControlName="password" />
 </mat-input-container>
 <mat-input-container>
 <input matInput type="password" 
 placeholder="Confirm Password" formControlName="confirmPassword" />
 </mat-input-container>
 <button mat-raised-button color="primary">Register</button>
 </form>
</mat-card>

在这里，formControlName 是连接我们的模型值和控件的标记，因此如果你没有在你的 HTML 中提供此值，则该特定控件的验证将不起作用。现在，让我们运行我们的应用程序并查看输出。

Angular_Form_With_Validation

请注意，我们仅为 “名字” 字段赋予了值，因此当我们单击 “注册” 按钮时，其余字段都显示为红色。因此，我们的验证正在按预期工作。

你总是可以应用一些自定义验证，例如 **电子邮件** 字段验证器。让我们现在就做吧。请按以下方式更改你的构造函数

constructor(private fb: FormBuilder, private auth: AuthService) {
    this.form = fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, isEmailValid('email')]],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required]
    });
  }

正如你所猜测的那样，我们需要实现函数 isEmailValid。

function isEmailValid(control) {
  return control => {
    var regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))
    @((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|
                     (([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return regex.test(control.value) ? null : { invalidEmail: true };
  }
}

现在我们已经完成了自定义验证，让我们在我们的应用程序中进行检查。

Angular 5 应用中的自定义电子邮件字段验证器

让我们为我们的 “注册” 按钮创建一个点击事件，并获取我们已键入的表单值，以便我们可以将这些值传递给我们的服务器并在我们的下一篇文章中保存它们。

<button mat-raised-button (click)="register()" color="primary">Register</button>

 register() {
    console.log(this.form.value);
}

请确保你在浏览器控制台中获取了这些值。

获取表单值

今天就到此为止。在我们的下一篇文章中，我们可以进行一些数据库操作，准备好了。

结论

非常感谢你的阅读。我是否遗漏了你认为需要的东西？你觉得这篇文章有用吗？我希望你喜欢这篇文章。请分享你宝贵的建议和反馈。

轮到你了。你怎么看？

没有评论的博客就不是博客，但请尽量保持主题。如果你有与本文无关的问题，你最好将其发布在 C# Corner、Code Project、Stack Overflow、ASP.NET 论坛上，而不是在此处发表评论。请在下面的评论中留下你的问题，如果可以，我一定会尽力帮助。

在 Angular 5 应用中实现验证

目录

引言

开发 Angular 5 应用系列

源代码

背景

Angular 中的验证

结论

轮到你了。你怎么看？