对前端开发人员来说，表单是非常重要的，它负责用户与程序的交互。它承载着一部分数据校验的功能，以此减少服务端的压力。本篇文章就是对angular表单验证的两种方法进行介绍。

模板驱动验证

为了向模板驱动表单中添加验证，需要添加一些验证属性，这里就用户登录界面为例进行说明

一：新建项目

到工作路径下，运行ng new valicate创建一个angular项目，然后用vscode打开

二：修改app.component.html模板文件

创建一个表单，有两个输入框，分别为用户名和密码，接下来对这两个输入框进行验证

app.component.html

    

        

        
        

      
Login
            

                

                     
                    
                        Email address
                    
                    
                
                

                     
                    
                        Password
                    
                    
                
                
                    Submit
                
            
        

        

        
    

代码中运用到的样式均为Bootstrap4中提供的css样式，读者可以到其官网下载。
最终的样式如下：

三：添加校验
首先在app.module.ts中，添加FormsModule模块，并增加到imports数组中

Smile企业费用管理系统源码1.0

一、源码特点企业费用管理系统，有权限分配，登陆验证，新增角色，发布公告等二、功能介绍1、js的兼容性有个地方不行（比如模块排序，那个时候也是雏鸟一只，写了一小撮，现在用jq应该好处理的吧，ie里面没问题，大家发挥吧）2、里面的菜单和对应菜单下面的目录项可以根据需求自己添加的，有对应模块3、可以根据自己设定的角色添加对应的访问页面4、有些操作涉及到按钮权限，对于这种思路，我粗粗的写了2个自定义控件，

下载

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后在模板页面中添加校验器

添加校验的app.component.html

    

        

        
        

      
Login
            

                

                     
                    
                        Email address
                    
          
        
        

          请输入邮箱地址！
        
                

                     
                    
                        Password
                    
                    
                
                
                    Submit
                
            
        

        

        
    

最终效果如下：

四：注意事项
在Input标签中必须添加name属性，且 #name 与ts中class的属性名称不能相同，如图

响应式表单的验证

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { StudentComponent } from './student/student.component';

@NgModule({
   declarations: [
      AppComponent,
      StudentComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

相关文章推荐：

javascript事件定义，绑定事件和事件驱动中的命令语言

Javascript中作用域+闭包的详细讲解