使用指令进行角度模板驱动的表单验证

时间:2018-01-31 17:21:05

标签: angular

我一直在查看表单验证基础at the official docs,我不能用其中一个例子来解决这个问题。

一些背景知识:

  

在此示例中,禁用名称为“bob”,因此验证器将为   拒绝任何包含“bob”的英雄名字。在其他地方,它可以拒绝   “alice”或配置正则表达式匹配的任何名称。

这是输入元素:

    a   1   2   3    a   1   2   3
    b   4   5   6    a   1   2   3
    b   9   9  39    a   1   2   3
    a   1   2   3    b   4   5   6
    b   4   5   6    b   4   5   6
    b   9   9  39    b   4   5   6
    a   1   2   3    b   9   9  39
    b   4   5   6    b   9   9  39
    b   9   9  39    b   9   9  39
    a   1   2   3    c  16  17   18  
    b   9   9   39   c  16  17   18 
    b   4   5   6    c  16  17   18

然而,他们的例子的输入似乎没有得到验证:

enter image description here

虽然使用来自同一示例的反应形式的输入按预期验证:

enter image description here

如何使模板驱动的表单显示警报,如反应式表格所示?

以下是官方文档中的示例:https://stackblitz.com/angular/byyynkdrode

提前致谢!

1 个答案:

答案 0 :(得分:2)

必须

<input id="name" name="name" class="form-control"
               required minlength="4" appForbiddenName forbiddenName="bob"
               [(ngModel)]="hero.name" #name="ngModel" >

<input id="name" name="name" class="form-control"
               required minlength="4" appForbiddenName [forbiddenName]="'bob'"
               [(ngModel)]="hero.name" #name="ngModel" >

看到指令名称是“appForbiddenName”,@ Input参数是“forbiddenName”。当然,您可以更改指令,并使选择器的名称与@Input

相同
@Directive({
  selector: '[forbiddenName]', //<--forbiddenName, NOT appforbiddenName
  providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
export class ForbiddenValidatorDirective implements Validator {
  @Input() forbiddenName: string; //<--see that the input variable is the same
                                  //that the selector of the directive
  ....
}