正文 

当前位置： 首页 > java > java教程

angular表单验证

fyk曩昔      2022-02-10     744

关键词：

Angular表单验证分为两种验证：1.内置验证（required，minlength等）；2.自定义验证（正则表达式）。

接下来我们用一个注册账号的demo来看一下这两种验证是如何实现的。

项目界面

技术分享

一、内置验证

其中账户名有required验证和最短长度验证，其他两个只有required验证

1.项目目录

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

2.项目代码

app.module.ts

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;
import { FormsModule,ReactiveFormsModule  }   from ‘@angular/forms‘;//表单验证必须导入这两个模块

import { AppComponent } from ‘./app.component‘;

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,    //注册模块
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 
app.component.ts

 

import { Component,OnInit } from ‘@angular/core‘;
import { FormGroup, FormControl, Validators } from ‘@angular/forms‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title = ‘app‘;
  Form:FormGroup;
  data={
      name:"",
      email:"",
      tel:""
  }
  ngOnInit(): void {
      this.Form = new FormGroup({
            ‘name‘: new FormControl(this.data.name, [
              Validators.required,
              Validators.minLength(4)
            ]),
            ‘email‘: new FormControl(this.data.email, Validators.required),
            ‘tel‘: new FormControl(this.data.tel, Validators.required)
          });
    }

    get name() { return this.Form.get(‘name‘); }
    get email() { return this.Form.get(‘email‘); }
    get tel() { return this.Form.get(‘tel‘); }
}

简单来说，在使用验证表单的时候，大致分为四步：

（1）导入相关模块FormGroup, FormControl, Validators；

（2）声明表单验证变量From:FromGroup；

（3）定义验证规则；

（4）通过它所属的控件组（FormGroup）的get方法来访问表单控件

app.component.html

<div class="wrapper">
    <div class="row">
        <p class="title-wrapper">注册账号</p>
    </div>
    <div class="row">
        <div class="contain-wrapper"  [formGroup]="Form">
            <label for="name">账户名：</label>
            <input type="text" id="name" formControlName="name"><br/>
            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
                <div *ngIf="name.errors.required">
                    请输入长度账户名！
                </div>
                <div *ngIf="name.errors.minlength">
                    账户名长度不小于4！
                </div>
            </div>
            <label for="email">邮箱：</label>
            <input type="text" id="email" formControlName="email"><br/>
            <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
                <div *ngIf="email.errors.required">
                    请输入邮箱！
                </div>
            </div>
            <label for="tel">电话:</label>
            <input type="text" id="tel" formControlName="tel">
            <div *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert alert-danger">
                <div *ngIf="tel.errors.required">
                    请输入电话！
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <button class="btn btn-primary confirm">确认</button>
    </div>
</div>

app.component.css

*{
    font-size: 18px;
}
.wrapper{
    margin: 0 auto;
    margin-top:10%;
    width:30%;
    height: 20%;
    border:1px solid black;
    border-radius: 10px;
}

.title-wrapper{
    margin: 0 auto;
    padding-top: 20px; 
    padding-bottom: 20px;
    width:370px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
}
label{
    display: inline-block;
    width:72px;
}
.contain-wrapper{
    width: 300px;
    margin:0 auto;
}
.confirm{
    margin-top:20px;
    width:100%;

}

3.项目效果

技术分享

二、自定义验证

自定义表单验证，需要创建自定义验证器，我们接下来更改邮箱的验证，将其改为有格式的验证，而不是单纯的存在验证，首先我们来看一下项目目录的更改

1.项目目录

----------app.component.ts

----------app.component.html

----------app.component.css

----------app.module.ts

----------emailAuthentication.ts

 

2.项目代码

app.module.ts

注册自定义验证器EmailValidatorDirective

import { BrowserModule } from ‘@angular/platform-browser‘;
import { NgModule } from ‘@angular/core‘;
import { FormsModule,ReactiveFormsModule  }   from ‘@angular/forms‘;
import { EmailValidatorDirective } from ‘./emailAuthentication‘;

import { AppComponent } from ‘./app.component‘;

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

emailAuthentication.ts

import { Directive, Input, OnChanges, SimpleChanges } from ‘@angular/core‘;
import { AbstractControl, NG_VALIDATORS, Validator, ValidatorFn, Validators } from ‘@angular/forms‘;

/** A hero‘s name can‘t match the given regular expression */
export function emailValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        const forbidden = !nameRe.test(control.value);
        return forbidden ? { ‘forbiddenName‘: { value: control.value } } : null;
    };
}

@Directive({
    selector: ‘[appForbiddenName]‘,
    providers: [{ provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true }]
})
export class EmailValidatorDirective implements Validator {
    @Input() forbiddenName: string;

    validate(control: AbstractControl): { [key: string]: any } {
        return this.forbiddenName ? emailValidator(new RegExp(this.forbiddenName, ‘i‘))(control)
            : null;
    }
}

app.component.ts

import { Component,OnInit } from ‘@angular/core‘;
import { FormGroup, FormControl, Validators } from ‘@angular/forms‘;
import { emailValidator } from ‘./emailAuthentication‘; //导入emailValidator自定义验证器

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘./app.component.html‘,
  styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
  title = ‘app‘;
  //email的正则表达式
  emailExp = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ ;
  Form:FormGroup;
  data={
      name:"",
      email:"",
      tel:""
  }
  ngOnInit(): void {
      this.Form = new FormGroup({
            ‘name‘: new FormControl(this.data.name, [
              Validators.required,
              Validators.minLength(4)
            ]),
            ‘email‘: new FormControl(this.data.email, [
                Validators.required,
                emailValidator(this.emailExp) //自定义验证器
                ]),
            ‘tel‘: new FormControl(this.data.tel, Validators.required)
          });
    }

    get name() { return this.Form.get(‘name‘); }
    get email() { return this.Form.get(‘email‘); }
    get tel() { return this.Form.get(‘tel‘); }
}

app.component.html

<div class="wrapper">
    <div class="row">
        <p class="title-wrapper">注册账号</p>
    </div>
    <div class="row">
        <div class="contain-wrapper"  [formGroup]="Form">
            <label for="name">账户名：</label>
            <input type="text" id="name" formControlName="name"><br/>
            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
                <div *ngIf="name.errors.required">
                    请输入账户名！
                </div>
                <div *ngIf="name.errors.minlength">
                    账户名长度不小于4！
                </div>
            </div>
            <label for="email">邮箱：</label>
            <input type="text" id="email" formControlName="email" required><br/>
            <div *ngIf="email.invalid && (email.dirty || email.touched)" class="alert alert-danger">
                <div *ngIf="email.errors.forbiddenName">
                  请输入正确格式的邮箱！
                </div>
            </div>
            <label for="tel">电话:</label>
            <input type="text" id="tel" formControlName="tel">
            <div *ngIf="tel.invalid && (tel.dirty || tel.touched)" class="alert alert-danger">
                <div *ngIf="tel.errors.required">
                    请输入电话！
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <button class="btn btn-primary confirm" [disabled]="Form.invalid" >确认</button>
    </div>
</div>

在最后确认的时候，我们设置一下按钮的disabled属性，在表单验证不通过的时候，确认按钮是点击不了的，显示不可点击状态。[disabled]="Form.invalid"。

3.项目效果

技术分享









Angular 2 提交时触发表单验证

】Angular2提交时触发表单验证【英文标题】：Angular2TriggerFormValidationonSubmit【发布时间】：2017-03-0601:27:11【问题描述】：我用angular2创建了一个表单并添加了一些自定义验证器。现在我想在用户点击提交按钮时触发表单验证。在到... 查看详情

Angular 4 表单验证和错误消息

】Angular4表单验证和错误消息【英文标题】：Angular4formvalidationandErrorMessage【发布时间】：2018-03-2706:25:01【问题描述】：我必须在我的应用程序中实现表单验证。我正在使用Angular4。我的应用程序中还有10个表单。我不知道我的问... 查看详情

Angular 单元测试表单验证

】Angular单元测试表单验证【英文标题】：Angularunittestingformvalidation【发布时间】：2019-12-1819:16:42【问题描述】：我正在学习Angular8，并且正在使用Karma进行单元测试。我创建了一个可以正常工作的基本注册表单，但我在测试中遇... 查看详情

angular表单验证

用法<inputtype="text"ng-model="string"[name="string"][required="string"][ng-required="string"][ng-minlength="number"][ng-maxlength="number"][pattern="string"][ng-pattern="string"]//正则验证[ng-change="st 查看详情

angular2表单验证相关

angular4响应式表单与校验http://blog.csdn.net/xiagh/article/details/78360845?locationNum=10&fps=1HowtoimplementCustomAsyncValidatorinAngular4https://stackoverflow.com/questions/43366514/how-to-implement-cu 查看详情

Angular 5 - 表单验证电子邮件

】Angular5-表单验证电子邮件【英文标题】：Angular5-formvalidatione-mail【发布时间】：2018-08-1709:10:14【问题描述】：我想解决这个问题：Angular5-模板驱动表单输入字段的类型为电子邮件。示例：<inputtype="email"[(ngModel)]="model.email"#email... 查看详情

多个字段的Angular 4表单验证

】多个字段的Angular4表单验证【英文标题】：Angular4formvalidationonmultiplefields【发布时间】：2018-05-0100:59:53【问题描述】：编辑：我想要实现的是对一个formControl而不是整个表单进行验证。验证器应检查门牌号、街道等所有原子字段... 查看详情

怎么消除angular的表单验证

参考技术A客户端表单验证是AngularJS里面最酷的功能之一。AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单。在AngularJS中，有许多表单验证指令。在这里，我们将谈谈几个最流行指令，然后我们将... 查看详情

表单提交后Angular 2显示验证错误

】表单提交后Angular2显示验证错误【英文标题】：Angular2displayvalidationerrorsafterformsubmit【发布时间】：2016-03-1011:26:09【问题描述】：我正在构建一个模型驱动的Angular2表单。我发现的大多数示例都会禁用提交按钮，直到表单有效。... 查看详情

Angular 2 模板驱动的表单组验证

】Angular2模板驱动的表单组验证【英文标题】：Angular2templatedrivenformgroupvalidation【发布时间】：2017-06-2707:57:15【问题描述】：我有一个关于angular2模板驱动表单的问题。我已经设置了其中一个表单，如果表单组中的一个输入无效，... 查看详情

angular5+自定义表单验证器

Angular5+自定义表单验证器CustomValidators标签（空格分隔）：Angular首先阐述一下遇到的问题：怎样实现“再次输入密码”的验证（两个controller值相等）（equalTo）怎样反向监听（先输入“再次输入密码”，后输入设置密码）解决思... 查看详情

在提交 Angular4 时触发表单验证

】在提交Angular4时触发表单验证【英文标题】：TriggerformvalidationonSubmitAngular4【发布时间】：2018-01-0921:43:40【问题描述】：我使用Angular和ionic设计了一个模板驱动的表单，它具有一些自定义（onblur）验证。现在我喜欢在点击提交按... 查看详情

用于验证电话号码的 Angular 表单验证

】用于验证电话号码的Angular表单验证【英文标题】：Angularformvalidationtovalidatethephonenumber【发布时间】：2020-03-2616:33:43【问题描述】：我正在尝试使用角度中的正则表达式验证电话号码HTML内容<divclass="form-grouprow"><inputtype="te... 查看详情

ngverify-更高效的angular表单验证

ngVerifyv1.5.0aeasyAngularFormValidationplugin.简洁高效的__angular表单验证插件__Seehowpowerfulit.看看它有多强大动态校验自动关联提交按钮多种tip校验消息提示不只校验dom元素值，还可以校验ngModel数据模型支持任意类型表单元素，甚至可以... 查看详情

angular2模板驱动的表单验证问题

】angular2模板驱动的表单验证问题【英文标题】：angular2templatedrivenformvalidationissue【发布时间】：2018-03-0103:32:05【问题描述】：我对angular2模板驱动的表单验证有问题，以下是我的表单的代码。<h1>page_title</h1><div*ngIf="suc... 查看详情

从浅入深剖析angular表单验证

...代人，里面的逻辑开始变得不清晰，而且代码结构不是很angular。是很有必要深入了解表单验证。<bodyng-controller="MainController"><formname="form"novalidate="novalidate"><inputname="text"type=" 查看详情

如何在 ANGULAR 2 中提交表单时重置表单验证

】如何在ANGULAR2中提交表单时重置表单验证【英文标题】：HowtoresetformvalidationonsubmissionoftheforminANGULAR2【发布时间】：2016-04-0901:57:29【问题描述】：我必须在验证的同时重置我的表单。有什么方法可以将表单的状态从ng-dirty重置为n... 查看详情

使用 UI Utils 进行 Angular 表单验证

】使用UIUtils进行Angular表单验证【英文标题】：AngularformvalidationwithUIUtils【发布时间】：2014-11-2618:44:30【问题描述】：我希望验证表单并在没有表单错误的情况下禁用提交。我正在利用UIUtils。电子邮件验证、密码匹配和密码消息... 查看详情