angular 4:自定义验证器不起作用 [英] angular 4 : custom validator not working

查看：38
本文介绍了angular 4:自定义验证器不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我从 angular 官方文档中提取了这个示例.我注意到自定义验证适用于反应式表单，但不适用于模板驱动的表单.

这是提到的例子

指令:

export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {return (control: AbstractControl): {[key: string]: any} =>{const forbidden = nameRe.test(control.value);禁止返回?{'forbiddenName': {value: control.value}} : null;};}@指示({选择器:'[appForbiddenName]'，提供者:[{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]})导出类 ForbiddenValidatorDirective 实现了 Validator {@Input() forbiddenName: 字符串；验证(控制:AbstractControl):{[键:字符串]:任何} {返回 this.forbiddenName ?forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control): 空值;}}

模板:

 
<div [隐藏]="heroForm.submitted"><div class="form-group"><label for="name">Name</label><input id="name" name="name" class="form-control"required minlength="2" forbiddenName="bob"[(ngModel)]="hero.name" #name="ngModel" ><div *ngIf="name.invalid && (name.dirty || name.touched)"class="警报警报-危险"><div *ngIf="name.errors.required">姓名为必填项.

<div *ngIf="name.errors.minlength">名称长度必须至少为 2 个字符.

<div *ngIf="name.errors.forbiddenName">姓名不能是 Bob.

</表单>

解决方案

你的指令叫做 appForbiddenName，所以

//在你的指令中@Input('appForbiddenName') forbiddenName: string;//在你的模板驱动表单中<input id="name" ... appForbiddenName="bob" ...>

I pulled this example from angular official doc. I noticed that the custom validation is working with the reactive forms but it is not working with template-driven forms.

Here is the plunker of the mentioned example

the directive:

export function forbiddenNameValidator(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: ForbiddenValidatorDirective, multi: true}]
  })
  export class ForbiddenValidatorDirective implements Validator {
    @Input() forbiddenName: string;

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

the template:

  <form #heroForm="ngForm">
      <div [hidden]="heroForm.submitted">

        <div class="form-group">
          <label for="name">Name</label>
          <input id="name" name="name" class="form-control"
                 required minlength="2" forbiddenName="bob"
                 [(ngModel)]="hero.name" #name="ngModel" >

          <div *ngIf="name.invalid && (name.dirty || name.touched)"
               class="alert alert-danger">

            <div *ngIf="name.errors.required">
              Name is required.
            </div>
            <div *ngIf="name.errors.minlength">
              Name must be at least 2 characters long.
            </div>
            <div *ngIf="name.errors.forbiddenName">
              Name cannot be Bob.
            </div>

          </div>
        </div>
      </div>
    </form>

解决方案

your directive it's called appForbiddenName, so

//in your directive
@Input('appForbiddenName') forbiddenName: string;

//In your template driven Form
<input id="name" ...  appForbiddenName="bob" ...>

这篇关于angular 4:自定义验证器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆