首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Angular 7 bind指令

Angular 7 bind指令
EN

Stack Overflow用户
提问于 2019-07-17 10:38:25
回答 1查看 80关注 0票数 0

我在使用指令时遇到了问题。当它已经导入时。示例如下:

代码语言:javascript
运行
复制
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) {
        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();
        }
    }
}

并将其与like一起使用:

代码语言:javascript
运行
复制
 <input
                  type="text"
                  class="form-control"
                  name="amount"
                  id="field_amount"
                  min="1"
                  formControlName="amount"
                  [class.is-invalid]="editForm.get('amount').invalid && (editForm.get('amount').dirty || editForm.get('amount').touched)"
                  [value]="editForm.get('amount').value | numberFormat"
                  OnlyNumber="true"
                />

但是我的指令不起作用,还是得到了字符串。有什么建议吗?我真正想要的是,当用户输入时,它应该是只接受数字,而不是字符串。

EN

回答 1

Stack Overflow用户

发布于 2019-07-17 10:48:08

代码语言:javascript
运行
复制
OnlyNumber="true"

将值设置为字符串,请使用属性绑定而不是属性绑定。

代码语言:javascript
运行
复制
[OnlyNumber]="true"

您不应该创建这样的指令,因为它违反了可访问性准则。如果值未通过验证,则输入字段应采用所有的键击,并提供易于理解的验证消息。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57067820

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档