如何在Angular2中触发表单验证器？

在Angular 2中，处理复杂表格的最好方法是使用反应式表格。下面我们将详细说明如何触发登录页面的表单验证器。

在反应形式中，我们使用FormControl，并使用它来访问表单的子字段及其属性。它们的一些属性是脏的，被触摸的，未被触摸的，原始的，有效的，错误的等。使用这些属性，我们实际上可以根据需求触发验证。

• 脏：如果用户将子字段的值从默认值更改，则此属性将被激活。
• 触摸：如果用户访问子字段，则触摸的属性值设置为“ true”。
• 未修改：如果用户不访问子字段，则未修改属性值设置为“ true”。它与被触摸的属性完全相反。
• 原始的：如果用户访问该子字段并且未对其值进行任何更改，则将其设置为“ true”。
• 有效：如果表单完成所有表单验证，则它将为“ true”。
• 错误：客户端Angular会生成一个错误列表，其中包含所有内置错误，例如required，maxLength，pattern，minLength等。

使用上面讨论的属性，我们可以使用自定义消息触发表单验证。使用每个子字段的FormControl并检查其属性，例如touched，dirty等，我们可以根据需要验证表单。

方法：

• 首先，根据.html文件将所有表单控件添加到component.ts文件中。
• 然后在component.ts文件中为所需的子字段添加验证，例如：必需，最大长度，模式等。
• 确保您从“验证器”中从“ angular @ / forms”导入了所有内容
• 然后在以下代码中演示的in.html文件中添加验证消息。
• 另外，从模块文件中的“ angular @ / material”导入所有依赖项。

为了获得更好的动画和样式，angle提供了Angular材质，该材质具有丰富的样式信息。使用角形材料对表单进行样式设置。因此，我们使用诸如，，和matInput之类的标签。

使用npm安装后，我们可以从角形材质中导入。导入命令如下：

ng add @angular/material

代码实现：以下是上述方法的实现。

app.module.ts：

Javascript

import { BrowserModule } from 
        '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from 
        '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } 
        from '@angular/forms';
import { MatInputModule } from 
        '@angular/material/input';
import { MatDialogModule } from 
        '@angular/material/dialog';
import { MatFormFieldModule } from 
        '@angular/material/form-field';
import { MatIconModule } from 
        '@angular/material/icon';
  
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        BrowserAnimationsModule,
        MatInputModule,
        MatFormFieldModule,
        MatIconModule,
        MatDialogModule,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts：

Java脚本

import { Component, OnInit } 
        from '@angular/core';
  
// Imports
import { FormGroup, FormControl, 
    Validators } from '@angular/forms';
  
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
    profile = new FormGroup(
        {
            // Setting Validation Controls
            email: new FormControl('', 
                [Validators.required, 
                Validators.minLength(8),
                Validators.pattern(
/^\w+@[a-z0-9A-Z_]+?\.[a-zA-Z]{2, 5}$/)]),
                password: new FormControl('', 
                [Validators.required, 
                Validators.minLength(8),
                Validators.pattern(
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8, }$/)])
        }
    );
}

app.component.html：

的HTML

  

    

  
      
Login to start
  
      

  
        
          Email
          
  
          
            Enter a valid email with 
            requested pattern
          
  
          
            Email should have minimum 
            8 characters
          
  
          
            Email is required
          
        
  
        
          Password
          
  
          
            Password is required
          
  
          
            Enter a password with 
            more than 8 letters
          
  
          
            Enter a password with 
            valid pattern
          
        
  
         
          Submit
        
      
    
  

输出：因此，我们已经成功触发了表单验证。