Question

我有以下自定义验证程序，它可以按预期工作，没有任何问题。

@Directive({
    selector:'[TestValidator]',
    providers:[
        { provide: NG_VALIDATORS, useExisting:TestValidatorDirective, multi:true}
    ]
})
export class TestValidatorDirective implements Validator{

    validate(control:AbstractControl):ValidationErrors|null {
       return  control.value == '-1' ? {'defaultSelected':true} : null;
    }   
}

当我从TestValudatorDirective中删除provider数组并将其放入app.module.ts时，如下所示，它不起作用。

.....
providers: [
      { provide: NG_VALIDATORS, useExisting:TestValidatorDirective, multi:true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

任何人都可以向我解释这种行为，我很困惑。

Answer 1

无需将验证器移至AppModule。要能够在所需的任何地方使用验证器，只需确保它在模块的declarations中即可。

NG_VALIDATORS令牌通过Angular注入到每个Form Control中。当此伪指令在providers部分中指定内容时，它会将自己添加到该 that 特定字段的注入令牌中。

因此，这不像将服务添加到providers节中……在这种情况下，它不应该位于模块中。

但是您的模块应允许使用该指令，因此需要将该指令添加到声明中：

@NgModule({
  //...
  delcarations: [
    TestValidatorDirective
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thoughtram上有一篇很好的文章很好地涵盖了这个主题：https://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

Answer 2

尝试：

.....
declaration : [
   TestValidatorDirective , < -- add here
   //... other components
 ],
bootstrap: [AppComponent]
})

export class AppModule { }

伪指令在declarations下声明，而不在providers下声明

自定义指令在app.module中提供时不起作用

2 个答案: