如何在角度反应形式中使用指令
如何在角度反应形式中使用指令
提问于 2018-08-21 01:58:28
我正在尝试在我的HTML中添加一个指令，这样我就可以只允许用户输入数字。
这是我的指令
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[OnlyNumber]'
})
export class OnlyNumber {
regexStr = '^[0-9]*$';
constructor(private el: ElementRef) { }
@Input() OnlyNumber: boolean;
@HostListener('keydown', ['$event']) onKeyDown(event: any) {
let e = <KeyboardEvent>event;
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+V
(e.keyCode == 86 && 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;
}
let ch = String.fromCharCode(e.keyCode);
let regEx = new RegExp(this.regexStr);
if (regEx.test(ch))
return;
else
e.preventDefault();
}
}
}我在HTML中使用过这个指令。
<div class="form-group">
<h6>Estimated Hours</h6>
<input type="text" class="form-control rounded-0" placeholder="Estimated Hours" formControlName="EstimatedHours" OnlyNumber>
</div>我在app.module.ts中的声明下添加了一个指令。我在这里漏掉了什么吗，因为我可以输入任何字母。
回答 1
Stack Overflow用户
发布于 2018-08-21 02:27:03
使用Validator.pattern
TS
let reg = /^\d+$/;
this.Form=new FormGroup({
number: new FormControl('',[Validators.pattern(reg)])
})HTML
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-10 col-md-8 col-md-offset-2 col-sm-offset-1">
<form [formGroup]="Form" >
<input formControlName="number">
<button (click)="onSubmit()">Submit</button>
</form>
</div>
</div>
</div>如果您想在hostlistner中获取值，则不需要使用输入属性绑定，只需使用$event对象来获取值
@HostListener('keydown',['$event']) onChange($event){
console.log($event.target.value)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51936181
复制相关文章
相似问题