Angular 8 - 表单验证

表单验证是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();
   }

   //为名称创建必填字段验证器
   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

现在运行您的应用程序并将焦点放在文本框上。 然后，它将使用 show 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()
   {

   }
}

这里，

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

更新 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>

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

运行您的应用程序，您可以看到以下结果 −

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