I have directive to forbid entering non-numeric symbols in input
Here is directive
import { NgControl } from "@angular/forms";
import { HostListener, Directive } from "@angular/core";
@Directive({
exportAs: "number-directive",
selector: "number-directive, [number-directive]",
})
export class NumberDirective {
private el: NgControl;
constructor(ngControl: NgControl) {
this.el = ngControl;
}
// Listen for the input event to also handle copy and paste.
@HostListener("input", ["$event.target.value"])
onInput(value: string): void {
// Use NgControl patchValue to prevent the issue on validation
this.el.control.patchValue(value.replace(/[^0-9]/g, "").slice(0));
}
}
Here is how I use it on input
<input
type="text"
tabindex="0"
class="search__input form-control-md + {{class}}"
[value]="config.value"
[required]="config.required"
[attr.maxlength]="config.maxLength"
[attr.minLength]="config.minLength"
#inputElem
number-directive
/>
But I still can write aaaaa or any words
Where can be my problem?
Suspect two root causes:
Forgot to add NumberDirective to declarations for app.module.ts.
You need to add NumberDirective to declarations for app.module.ts to register the directive.
@NgModule({
...
declarations: [..., NumberDirective],
})
export class AppModule {}
No provider forNgControl for your <input> element.
You will get the error message as below as missing [(ngModel)] for the input element. The directive expects that it is a NgControl. Hence it needs to have [(ngModel)].
Or you need [formControl]="configControl" for your <input> element.
Error: R3InjectorError(AppModule)[NgControl -> NgControl -> NgControl]: NullInjectorError: No provider for NgControl!
<input
type="text"
tabindex="0"
class="search__input form-control-md + {{ class }}"
[value]="config.value"
[required]="config.required"
[attr.maxlength]="config.maxLength"
[attr.minLength]="config.minLength"
#inputElem
number-directive
[(ngModel)]="config.value"
/>
OR
<input
type="text"
tabindex="0"
class="search__input form-control-md + {{ class }}"
[value]="config.value"
[required]="config.required"
[attr.maxlength]="config.maxLength"
[attr.minLength]="config.minLength"
#inputElem
number-directive
[formControl]="configControl"
/>
configControl = new FormControl();