อยากทำให้ input text รับเฉพาะค่าที่เป็นตัวเลข ทำยังไง
1. สร้าง Directive ขึ้นมาครับ
ng generate directive OnlyNumber –module=’app.module.shared.ts’
app.module.shared.ts คือไฟล์ที่จะ add declarations ให้อัติโนมัติ
เสร็จแล้วจะได้ไฟล์ only-number.directive.ts ขึ้นมา
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
import { Directive, ElementRef, Input, HostListener } from '@angular/core'; @Directive({ selector: '[OnlyNumber]' }) export class OnlyNumberDirective { regexStr = '^[0-9]*$'; constructor(private el: ElementRef) { } @Input() OnlyNumber: boolean; @HostListener('keydown', ['$event']) onKeyDown(event:any) { let e = <KeyboardEvent> event; //alert(e.keyCode) if (this.OnlyNumber) { if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 || // Allow: Ctrl+A (e.keyCode == 65 && e.ctrlKey === true) || // Allow: Ctrl+C (e.keyCode == 67 && e.ctrlKey === true) || // Allow: Ctrl+X (e.keyCode == 88 && e.ctrlKey === true) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { // let it happen, don't do anything return; } /* if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); }*/ let ch = String.fromCharCode(e.keyCode); let regEx = new RegExp(this.regexStr); if(regEx.test(ch)){ if(isNaN(this.el.nativeElement.value)){ //alert("isNaN:") this.el.nativeElement.value = '' e.preventDefault(); } return; }else{ e.preventDefault(); } } } } |
2. เรียกใช้งาน
|
1 2 3 4 5 |
<input type="text" placeholder="เพิ่มราคา" OnlyNumber="true" > |
มีปัญหาตอนกด key จากภาษาไทยนิดหน่อย แต่ก็พอรับได้
จบครับ หวังว่าจะมีประโยชน์นะครับ