Question

我一直在查看表单验证基础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

提前致谢！

Answer 1

必须

<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
  ....
}

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

1 个答案: