Angular - 表单验证

---

---

表单验证是 Web 应用程序的重要组成部分。它用于验证用户输入是否为正确的格式。

RequiredValidator

让我们在 Angular 中执行简单的必填字段验证。打开命令提示符并转到reactive-form-app。

cd /go/to/reactive-form-app

替换test.component.ts文件中的以下代码。

import { Component, OnInit } from '@angular/core';

//import validator and FormBuilder
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
   //Create FormGroup
   requiredForm: FormGroup;
   constructor(private fb: FormBuilder) {
      this.myForm();
   }

   //Create required field validator for name
   myForm() {
      this.requiredForm = this.fb.group({
      name: ['', Validators.required ]
      });
   }
   ngOnInit()
   {

   }
}

这里，

我们使用表单构建器来处理所有验证。构造函数用于创建一个带有验证规则的表单。

在test.component.html文件内添加以下代码。

<div>
   <h2>
     Required Field validation
   </h2>
   <form [formGroup]="requiredForm" novalidate>
         <div class="form-group">
           <label class="center-block">Name:
             <input class="form-control" formControlName="name">
           </label>
         </div>
         <div *ngIf="requiredForm.controls['name'].invalid && requiredForm.controls['name'].touched" class="alert alert-danger">
             <div *ngIf="requiredForm.controls['name'].errors.required">
             Name is required.
           </div>
         </div>
   </form>
 <p>Form value: {{ requiredForm.value | json }}</p>
 <p>Form status: {{ requiredForm.status | json }}</p>
 </div>

这里，

• requiredForm被称为全局表单组对象。它是父元素。表单控件是 requiredForm 的子元素。

• 条件语句用于检查，如果用户触碰了输入字段但没有输入值，则显示错误消息。

最后，使用以下命令启动您的应用程序（如果尚未启动）：

ng serve

现在运行您的应用程序并将焦点放在文本框上。然后，它将显示“Name is required”，如下所示：

如果在文本框中输入文本，则会进行验证并显示以下输出：

PatternValidator

PatternValidator用于验证正则表达式模式。让我们执行简单的电子邮件验证。

打开命令提示符并转到reactive-form-app。

cd /go/to/reactive-form-app

替换test.component.ts文件中的以下代码：

import { Component, OnInit } from '@angular/core';

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

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
})

export class TestComponent implements OnInit {
   requiredForm: FormGroup;
   constructor(private fb: FormBuilder) {
      this.myForm();
   }

   myForm() {
      this.requiredForm = this.fb.group({
      email: ['', [Validators.required, 
         Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")] ]
      });
   }

   ngOnInit()
   {

   }
}

这里，

在Validator中添加了电子邮件模式验证器。

更新test.component.html文件中的以下代码：

<div>
   <h2>
   Pattern validation
   </h2>
   <form [formGroup]="requiredForm" novalidate>
   <div class="form-group">
      <label class="center-block">Email:
      <input class="form-control" formControlName="email">
      </label>
   </div>
   <div *ngIf="requiredForm.controls['email'].invalid && requiredForm.controls['email'].touched" class="alert alert-danger">
       <div *ngIf="requiredForm.controls['email'].errors.required">
      Email is required.
      </div>
   </div>
   </form>
   <p>Form value: {{ requiredForm.value | json }}</p>
   <p>Form status: {{ requiredForm.status | json }}</p>
</div>

这里，我们创建了电子邮件控件并调用了电子邮件验证器。

运行您的应用程序，您将看到以下结果：

类似地，您可以自己尝试执行其他类型的验证器。