angular自定义验证器添加入模板驱动表单

Myuniverse      2022-02-13     748

关键词:

  • 创建自定义验证器的命令

ng generate directive forbidden-name(自定义床啊金验证器的名称)
  • 生成的文件内容

import { Directive } from '@angular/core';

@Directive({
  selector: '[appForbiddenName]'
})
export class ForbiddenNameDirective {

  constructor() { }

}
  • 创建一个文件用来放置正则判断的验证器算法。validatot.ts

import { ValidatorFn, AbstractControl } from '@angular/forms';

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    // 返回一个具有验证性函数
    return (control: AbstractControl): { [key: string]: any } | null => {
        console.log("control.value=",control.value)
        // control.value控件的值
        const forbidden = nameRe.test(control.value);
        console.log("forbidden=",forbidden)
        // 下面是三目运算符,当forbidden为false的时候,返回null,当forbidden为true的时候,返回{'forbiddenNAme':{value:control.value}}
        return forbidden ? { 'forbiddenName': { value: control.value } } : null;
    };
}
  • 在刚刚生成的自定义验证器中继承并实现一个接口

import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl} from '@angular/forms';
import { forbiddenNameValidator } from './validator';

@Directive({
  selector: '[appForbiddenName]',  // 指令作为属性使用
  providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenNameDirective,multi:true}]
})
export class ForbiddenNameDirective implements Validator {
  @Input('appForbiddenName') forbiddenName: string;   // 获取指令值
  // 指令实现接口,也就是说,在调用这条指令的时候,就已经能够启动这个函数
  validate(control: AbstractControl): {[key: string]: any} | null {
    // 键值对:map[key:string]any   {[key: string]: any} | null接收返回值的类型有键值对或者是NULL
    console.log("control:",control)
    console.log("forbiddenName=",this.forbiddenName)
    // 还是三目运算符,this.forbidden为空的时候,不进行匹配
    return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control): null;
  }
  constructor() { }
}

有一个关键的地方是,实现Validator接口之后,要能够给全局的模板都能够实现,要注册。注册的密钥是angular固定提供的一种NG_VALIDATORS。注册的具体语句:

providers:[{provide:NG_VALIDATORS,useExisting:ForbiddenNameDirective,multi:true}]
  • 使用模板自定义的方法

<div>
    <label for="name">姓名:</label>
    <input id="name" class="form-control" ngModel name="name" #name='ngModel' appForbiddenName="bob" required
        minlength="3" style="width: 200px;height: 30px;">
</div>


<!-- forbiddenName="bob" 自定义的 -->

<div *ngIf="name.invalid &&(name.dirty||name.touched)">
    <div *ngIf="name.errors.required">
        Name is required
    </div>
    <div *ngIf="name.errors.minlength">
        Name must be at least 3 characters long.
    </div>
    <!-- appForbiddenName="bob"说明这个控件绑定了一个验证器,{ 'forbiddenName': { value: control.value } } 这个是返回值,有值则出现,无值就不出现 -->
    <div *ngIf="name.errors.forbiddenName">
        Name cannot be Bob.
    </div>
</div>

如何在模板驱动的表单中为 ngModelGroup 添加自定义验证

】如何在模板驱动的表单中为ngModelGroup添加自定义验证【英文标题】:HowtoaddcustomvalidationforngModelGroupinTemplatedrivenforms【发布时间】:2019-02-1502:19:15【问题描述】:我正在使用模板驱动的表单方法。我想在ngModelGroup上添加自定义验... 查看详情

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

...【发布时间】:2019-04-1612:03:09【问题描述】:我正在使用Angular6开发一个Web应用程序。我想创建一些受HTML输入组件启发的自定义组件。例如:CustomComponent.ts(打字稿)@Component(selector:\'custom-component\',templ 查看详情

如何根据 Angular 2 中的自定义验证规则显示错误消息?

...表单,并且我已经成功创建了可以在模板中使用的自定义验证器。但是,我找不到显示绑定到特定错误的特定错误消息的方法。我想区分为什么表格 查看详情

异步验证器不适用于 Angular 中的模板驱动表单

】异步验证器不适用于Angular中的模板驱动表单【英文标题】:AsyncValidatornotworkingwithTemplatedrivenFormsinAngular【发布时间】:2017-10-1801:31:52【问题描述】:我为我的模板驱动表单创建了一个异步验证器。importDirective,forwardReffrom"@angular... 查看详情

angular表单的使用实例

...单的创建//1、在根模块注入依赖模块import{FormsModule}from‘@angular/forms‘;//2、在模板中创建表单控 查看详情

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

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

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

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

Angular 2 - 自定义表单控件 - 禁用

】Angular2-自定义表单控件-禁用【英文标题】:Angular2-CustomFormControl-Disable【发布时间】:2017-03-0223:33:00【问题描述】:我使用ControlValueAccessor创建了一个自定义控件,该控件由input[type=text]和一个日期选择器组成。当我在模板驱动... 查看详情

angular5+自定义表单验证器

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

在提交 Angular4 时触发表单验证

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

Angular 5 动态表单中的自定义验证器

】Angular5动态表单中的自定义验证器【英文标题】:CustomvalidatorinAngular5dynamicforms【发布时间】:2018-05-2810:54:18【问题描述】:我正在从Angular5中的可配置json创建一个动态表单。一切正常,但我无法为特定字段添加自定义验证器。... 查看详情

Angular 11 自定义 ISBN 验证器响应式表单

】Angular11自定义ISBN验证器响应式表单【英文标题】:Angular11CustomISBNValidatorReactiveForms【发布时间】:2022-01-2322:09:59【问题描述】:我正在对ISBN号码进行自定义验证,我已经拥有检查号码并完美运行的功能,可以通过控制台为我... 查看详情

Angular 反应式表单自定义控件异步验证

】Angular反应式表单自定义控件异步验证【英文标题】:Angularreactiveformcustomcontrolasyncvalidation【发布时间】:2020-04-0608:48:11【问题描述】:更新:异步验证问题已成功解决。但是初始验证状态还有另一个问题。查看最新答案。诀窍... 查看详情

使用自定义验证和动态值的 Angular 表单

】使用自定义验证和动态值的Angular表单【英文标题】:Angularformsusingcustomvalidationandadynamicvalue【发布时间】:2021-04-2501:21:21【问题描述】:我正在尝试创建一个自定义的反应式表单验证,它允许我传递一个数据数组来检查一个字... 查看详情

Angular 5模板驱动表单单元测试-无法读取未定义的属性“表单”

】Angular5模板驱动表单单元测试-无法读取未定义的属性“表单”【英文标题】:Angular5templatedrivenformunitTest-Cannotreadproperty\'form\'ofundefined【发布时间】:2019-02-2320:14:54【问题描述】:您好,我是测试新手。我尝试了很多来测试一个... 查看详情

验证不会传播到 Angular 中的自定义表单控件 ng-select

】验证不会传播到Angular中的自定义表单控件ng-select【英文标题】:ValidationisnotpropagatetoCustomFormControlng-selectinAngular【发布时间】:2020-06-1223:43:55【问题描述】:我在Angular9应用程序中使用带有自定义表单控件的反应式表单。我用... 查看详情

模板中的自定义表单验证错误

】模板中的自定义表单验证错误【英文标题】:customformvalidationerrorsintemplate【发布时间】:2020-07-2513:40:12【问题描述】:如何在模板中传递自定义表单验证错误?forms.pydefclean_username(self):inputusername=self.cleaned_data[\'username\']iflen(inpu... 查看详情

如何使用 Angular 重置自定义表单控件

】如何使用Angular重置自定义表单控件【英文标题】:HowcanIresetacustomformcontrolwithAngular【发布时间】:2018-11-0921:54:04【问题描述】:我有一个带有验证的自定义表单控件。我在其中使用了一个独立的FormControl来处理值和一些验证。... 查看详情