Stack Overflow Asked by Ashot Aleqsanyan on November 28, 2020
I need to block the type of negative value and do not allow to type more numbers than 99,999,999.99
for my input.
Here is the code which I am using for the currency input.
<input mask="separator.2" thousandSeparator="," placeholder="Currency">
Any help will be appreciated.
Also here is the Stackblitz example.
https://stackblitz.com/edit/ngx-mask-currency-input?file=src/app/app.component.html
UPDATE
I found the answer to the second part of my question.
now the input looks like this
<input mask="separator.2" thousandSeparator="," separatorLimit="10000000" placeholder="Currency">
Now just needs to be blocked the type of -
character
Update on 01.09.2020
I have created the directive for blocking the type of negative(-
) values.
Here is the directive example.
import { Directive, ElementRef, OnInit, OnDestroy } from "@angular/core";
import { fromEvent } from "rxjs/internal/observable/fromEvent";
import { Subscription } from "rxjs";
@Directive({
// tslint:disable-next-line: directive-selector
selector: "[onlyPositive]"
})
export class OnlyPositiveDirective implements OnInit, OnDestroy {
subscriber$: Subscription;
constructor(private element: ElementRef<HTMLInputElement>) {}
ngOnInit() {
const input = this.element.nativeElement;
this.subscriber$ = fromEvent(input, 'input').subscribe(
(event: KeyboardEvent) => {
if (input.value.includes('-')) {
input.value = input.value.replace(/-/g, '');
}
}
);
}
ngOnDestroy() {
this.subscriber$.unsubscribe();
}
}
Usage example
<input onlyPositive mask="separator.2" thousandSeparator="," separatorLimit="99999999" [allowNegativeNumbers]="false" placeholder="Currency">
After Adams Advice I have changed the keypress event to the input event
DEMO: https://stackblitz.com/edit/ngx-mask-currency-input?file=src/app/app.component.html
Correct answer by Ashot Aleqsanyan on November 28, 2020
Demo you can solve with keypress
event
<input (paste)="onPaste($event)" mask="separator.2" thousandSeparator="," separatorLimit="10000000" [allowNegativeNumbers]="false" placeholder="Currency" class="form-control" (keypress)="isPositive($event)">
in component
isPositive(event: any) { return event.key === '-' ? false : true; }
and block paste
onPaste(event){
event.preventDefault();
}
Answered by pc_coder on November 28, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP