CODEWITHSUNDEEP
angularangular-directive
Mark Sandman
Mark Sandman

Reputation: 3333

The selector of the directive "TrimInputDirective" should have one of the prefixes - Angular Directive Linting Issue

I have written a directive that targets HTML inputs using CSS input selectors like so (I have shortened the code for ease of reading):

const TRIM_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TrimInputDirective),
  multi: true
};

@Directive({
  selector: `
    input
    :not([type=checkbox])
    :not([type=radio])
    :not([type=password])
    :not([readonly])
    :not(.ng-trim-ignore)
    [formControlName],
  `,
  providers: [ TRIM_VALUE_ACCESSOR ]
})
export class TrimInputDirective extends DefaultValueAccessor {
 // do stuff...
}

This all works as I expect however I have noticed that my linting gives me the following error:

ERROR: app/shared/directives/trim-input.directive.ts[18, 13]: The selector of the directive "TrimInputDirective" should have one of the prefixes "myapp, if, file, use" (https://angular.io/styleguide#style-02-08)

Now I can't do this as my selector isn't a defined attribute I would add to a HTML element. How can I resolve this error without wrapping my code in /* tslint:disable */ and /* tslint:enable */ comment flags?

Many thanks in advance

Upvotes: 0

Views: 1552

Answers (1)

peinearydevelopment
peinearydevelopment

Reputation: 11464

There are a number of different ways to deal with this depending on desired outcomes.

If you want to disable this type of check across the board, you can update your tslint.json file. There are two properties of interest: directive-selector": false, "component-selector": false. Obviously you could turn one or the other off if you are just interested in stopping the linting errors for directives or components.

Alternatively, those properties can take a list of values, so you could update them to something as follows: 

"directive-selector": [
      true,
      "element",
      "myapp"
]

If there are only a few places where you will be doing this, you can also use /* tslint:disable-next-line */ in your code so you don't have to disable and then reenable linting. It will only ignore the line following that comment.

Upvotes: 1

Related Questions