Пользовательская директива не работает, если она указана в app.module - PullRequest
Новая
       13

Пользовательская директива не работает, если она указана в app.module

0 голосов
/ 21 февраля 2019

У меня есть следующий пользовательский валидатор, который работает, как и ожидалось, без проблем. 

@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 и помещаю его в app.module.ts, как показано ниже, это не такработает. 

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

Может кто-нибудь объяснить мне это поведение, я немного растерялся.

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Нет необходимости перемещать ваш валидатор на AppModule.Чтобы иметь возможность использовать ваш валидатор везде, где вы хотите, вам просто нужно убедиться, что он находится в declarations вашего модуля.

Маркер NG_VALIDATORS вводится в каждый элемент управления формы Angular.Когда эта директива указывает что-то в разделе providers, она добавляет себя к этому токену внедрения для этого конкретного поля.

Так что это не похоже на добавление службы в раздел providers.... в этом случае его не должно быть в модуле.

Но ваш модуль должен разрешать использование директивы, поэтому необходимо добавить директиву в объявления: 

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

Есть хорошая статья Thoughtram, которая очень хорошо освещает эту тему: https://blog.thoughtram.io/angular/2016/03/14/custom-validators-in-angular-2.html

0 голосов
/ 21 февраля 2019

Попробуйте: 

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

export class AppModule { }

Директивы объявлены под declarations, а не providers

...