我一直在查看表单验证基础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
然而,他们的例子的输入似乎没有得到验证:
虽然使用来自同一示例的反应形式的输入按预期验证:
如何使模板驱动的表单显示警报,如反应式表格所示?
以下是官方文档中的示例:https://stackblitz.com/angular/byyynkdrode
提前致谢!
答案 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
....
}