首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我想在Angular 9中全局限制输入类型为文本的字母数字

在Angular 9中,您可以使用模板驱动表单或响应式表单来实现全局限制输入类型为文本的字母数字。

使用模板驱动表单:

  1. 在模板文件中,为输入框添加一个模板引用变量,例如:#inputRef
  2. 使用ngModel指令将输入框与一个变量绑定,例如:[(ngModel)]="inputValue"
  3. 在输入框上添加一个input事件监听器,并调用一个自定义方法来过滤输入的值,例如:(input)="filterInput(inputRef.value)"
  4. 在组件类中,定义filterInput方法,使用正则表达式来检查输入的值是否为字母数字,如果不是,则将输入框的值设置为过滤后的值,例如:
代码语言:txt
复制
filterInput(value: string) {
  const filteredValue = value.replace(/[^a-zA-Z0-9]/g, '');
  if (filteredValue !== value) {
    this.inputValue = filteredValue;
  }
}

使用响应式表单:

  1. 在组件类中,使用FormBuilder创建一个表单控件,例如:
代码语言:txt
复制
import { FormBuilder, Validators } from '@angular/forms';
// ...
constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    inputControl: ['', Validators.pattern(/^[a-zA-Z0-9]*$/)]
  });
}
  1. 在模板文件中,使用formControlName指令将表单控件与输入框绑定,例如:
代码语言:txt
复制
<form [formGroup]="myForm">
  <input type="text" formControlName="inputControl">
</form>
  1. 在组件类中,可以通过订阅表单控件的valueChanges属性来监听输入框的值变化,并过滤非字母数字的输入,例如:
代码语言:txt
复制
ngOnInit() {
  this.myForm.get('inputControl').valueChanges.subscribe(value => {
    const filteredValue = value.replace(/[^a-zA-Z0-9]/g, '');
    if (filteredValue !== value) {
      this.myForm.get('inputControl').setValue(filteredValue, { emitEvent: false });
    }
  });
}

以上是在Angular 9中实现全局限制输入类型为文本的字母数字的方法。这种限制可以应用于各种场景,例如表单输入、搜索框等。同时,腾讯云提供了云计算服务,您可以参考腾讯云的文档来了解更多相关信息:腾讯云云服务器(CVM)腾讯云云数据库 MySQL版等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

angular基础面试题_java web面试题

angular用管道转换数据 Angular 典型数据转换提供了内置管道,包括国际化转换(i18n),它使用本地化信息来格式化数据。...UpperCasePipe:把文本全部转换成大写。 LowerCasePipe :把文本全部转换成小写。...}) 在 Angular 中有三种类型指令: 组件 — 拥有模板指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局指令 属性型指令 — 改变元素、组件或其它指令外观和行为指令...angular 生命周期顺序 ngOnChanges: Angular 设置或重新设置数据绑定输入属性时响应。...在 ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用 ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。

13K50

Android EditText详解

2.获得“焦点”后全选组件内所有文本内容 当我们想在点击输入框获得焦点后,不是将光标移动到文本开始或者结尾;而是 获取到输入框中所有的文本内容的话!...效果图: [42111410.gif] 3.限制EditText输入类型 有时我们可能需要对输入数据进行限制,比如输入电话号码时候,你输入了一串字母,这 显然是不符合我们预期,而限制输入类型可以通过...:layout_height="wrap_content" android:inputType="phone" /> 可选参数如下: 文本类型,多为大写、小写和数字符号 android...,设置英文字母大写类型 我们可以通过下述两个属性来设置字间距: android:textScaleX="1.5" //设置字与字水平间隔 android:textScaleY="1.5"...//设置字与字垂直间隔 另外EditText还为我们提供了设置英文字母大写类型属性:android:capitalize 默认none,提供了三个可选值: sentences:仅第一个字母大写 words

1.7K20
  • 前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    (如AD 1 => 0001, AD 2010 => 2010) 'yy': 2位数字年份,范围(00-99)。...(0-59) '.sss' or ',sss': 毫秒,范围 (000-999) 'a': am/pm 标记 'Z': 4 位数字时区偏移(+符号)(-1200-+1200) 'ww':...点击价格与名称可以进行排序,排序时显示向上或向下箭头,在搜索框中可以输入查询条件过滤数据。验证搜索框中内容只能是字母数字,不允许输入其它类型字符。...参考 Angular 强上下文转义。 此外,浏览器 同源策略 和 交叉源资源共享(CORS) 策略会进一步限制模板是否能成功载入。...内部包含: 先定义模板,指定id与类型,模板中可以是任意片段: 引用模板,模板中可以使用angular表达式,引用方法与外部包含一样

    15.4K60

    angularjs学习第四天笔记(第一篇:简单表单验证)

    您好,是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵这个前端菜鸟,欢迎大家点评与赐教..."     5.邮箱:email,使用直接给文本type属性值赋值email即可--type="email"     6.数字:number,使用直接给文本type属性值赋值number即可...--type="number"     7.网页地址:url,使用直接给文本type属性值赋值url即可--type="url"   第四、表单中控制变量     1.表单属性值访问方式:...表单名称.文本框名称.属性名称     2.表单验证中用到表单属性包括如下:       未修改表单:属性名称关键词【pristine】,bool类型,如果修改为ture       用户修改过表单...:属性关键词【dirty】,bool类型,只有修改了就为true       合法表单:属性关键词【valid】,bool类型,只有当表单内容合法才true       不合法表单:属性关键词【invalid

    1.7K10

    angularjs学习第四天笔记(第一篇:简单表单验证)

    您好,是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵这个前端菜鸟,欢迎大家点评与赐教..."     5.邮箱:email,使用直接给文本type属性值赋值email即可--type="email"     6.数字:number,使用直接给文本type属性值赋值number即可...--type="number"     7.网页地址:url,使用直接给文本type属性值赋值url即可--type="url"   第四、表单中控制变量     1.表单属性值访问方式:...表单名称.文本框名称.属性名称     2.表单验证中用到表单属性包括如下:       未修改表单:属性名称关键词【pristine】,bool类型,如果修改为ture       用户修改过表单...:属性关键词【dirty】,bool类型,只有修改了就为true       合法表单:属性关键词【valid】,bool类型,只有当表单内容合法才true       不合法表单:属性关键词【invalid

    1.3K20

    angularjs学习第五天笔记(第二篇:表单验证升级篇)

    您好,是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵这个前端菜鸟,欢迎大家点评与赐教...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点false                   提示显示信息添加并列显示条件(focused)     举一个具体练习实例...<input type="text" name="acount" ng-model="user.acount" placeholder="必填:账号必须由<em>数字</em><em>字母</em>组合...$error.pattern">账号格式不符合要求(只能由数字字母组成) <span class="success...<input type="text" name="acount" ng-model="user.acount" placeholder="必填:账号必须由<em>数字</em><em>字母</em>组合

    1.5K30

    angularjs学习第五天笔记(第二篇:表单验证升级篇)

    您好,是一名后端开发工程师,由于工作需要,现在系统从0开始学习前端js框架之angular,每天把学习一些心得分享出来,如果有什么说不对地方,请多多指正,多多包涵这个前端菜鸟,欢迎大家点评与赐教...:定义一个指令(指令后续专门研究)当文本框失去焦点是设置focused=true,获得焦点false                   提示显示信息添加并列显示条件(focused)     举一个具体练习实例...<input type="text" name="acount" ng-model="user.acount" placeholder="必填:账号必须由<em>数字</em><em>字母</em>组合...$error.pattern">账号格式不符合要求(只能由数字字母组成) <span class="success...<input type="text" name="acount" ng-model="user.acount" placeholder="必填:账号必须由<em>数字</em><em>字母</em>组合

    1.7K10

    iOS-UITextField 全面解析iOS中UITextField 使用全面解析UITextField代理方法通知UITextField 在storyboard 中设置属性

    //要防止文字被改变可以返回NO //这个方法参数中有一个NSRange对象,指明了被改变文字位置,建议修改文本也在其中   return YES; } 限制只能输入特定字符 -(BOOL...(关于正则表达式和谓词详细使用,将会尽快整理出来供大家查阅) 所以,如果你要限制输入英文的话,就可以把这个定义: #define Knum @"^[A-Za-z]+$" 当然,你还可以在以上方法...return之前,做一提示,比如提示用户只能输入数字之类。...15、Keyboard : 选择键盘类型,比如全数字字母数字等。...19、Secure : 当你文本框用作密码输入框时,可以选择这个选项,此时,字符显示星号。

    7.1K60

    iOS UITextField详解

    //设置YES时文本会自动缩小以适应文本窗口大小.默认是保持原来大小,而让长文本滚动 textFied.adjustsFontSizeToFitWidth = YES; //设置自动缩小显示最小字体大小...,当编辑结束,文本字段会让出first responder //要想在用户结束编辑时阻止文本字段消失,可以返回NO //这对一些文本字段必须始终保持活跃状态程序很有用,比如即时消息...,请注意这个\n,如果不写这个,Done按键将不会触发,如果用在SearchBar中,将会不触发Search事件,因为你自己限制不让输入\n,好惨,在项目中才发现。)...所以,如果你要限制输入英文和数字的话,就可以把这个定义: #define kAlphaNum @”ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789...当然,你还可以在以上方法return之前,做一提示,比如提示用户只能输入数字之类。如果你觉得有需要的话。

    1.8K30

    iOS 文本输入控制(献上框架)

    ---- 一、痛点 我们在业务开发中,往往会遇到需要限制文本输入需求,比如只能输入数字、不能输入空格,稍微复杂一点比如小数点后最多两位价格输入。当然,若你正则表达式玩儿得很溜,这些并不是难题。...以下两种情况,在代理方法里面处理会出现问题: 在这里判断了长度:比如限制最多输入8个字符,我们还想在打几个拼音就会看到textFiled里面文本内容不会增加了,也就是无法继续输入,因为此时jian shu...在这里限制了非法字符:比如在该代理方法限制空格非法字符,那么在输入到jian s时候,就会出现点击无反应,因为此时已经有非法字符出现,文本不允许录入。...: /** 限制输入长度,NSUIntegerMax表示不限制(默认不限制) */ @property (nonatomic, assign) NSUInteger maxLength; /** 限制输入文本类型...当然,现在你不用知道内部实现,从结构设计来看,应该很轻松想到使用方法就是给 yb_inputCP 属性赋值,YBInputControlProfile类包含了诸如长度、文本限制类型、直接输入正则表达式

    1.1K120

    学习vim有这一篇就足够了

    本文以常用 vim 例进行说明。...^ :英文输入下,按 shift 和数字键 6 即可。可以快速移动光标到所在行,「第一个非空字符」处。因为敲代码时总有缩进,当然希望到这一行代码第一个字母,而不是这一行行首空格了。...如果想要到指定哪一行可以输入行号,再输入 G 。(注意:是大写 G)比如到 67 行,输入 67 + G ❝到指定行是最喜欢功能。当然需要配合显示行号使用,显示行号会在末行模式处讲。...%表示整个文件;1, 10表示1到10行范围内 2.s 表示替换 3.g 表示全局 ❞ 3.总结一些骚操作 1.要查找光标所在单词,直接按下面的快捷键: * ❝也就是按 shift + 键盘字母区上方数字键...可以使用如下快捷键: "+y 先选中所有复制内容,然后按上述快捷键(注意「上述快捷键是三个字符」)即可复制到系统剪切板中。 4.如果想在新打开文件中粘贴上一个文件中复制内容呢?

    1.1K40

    正则表达式常用语法总结

    正则表达式通常被用来检索、替换那些符合某个模式(规则)文本 普通字符 字母数字、标点符号、键盘特殊符号等 定义字符集 [a-z] 匹配 26 个字母之一 [aeiou]...匹配 aeiou 这 5 个字符其中某一个字符 [a-zA-Z] 匹配 26 个(大小写)字母某一个字母 [a-zA-Z0-9_-] 匹配(大小写)字母数字、下划线、中横线 某一个字符...[0-9] 匹配 0 到 9 之间任意一个数字 [9-3] [z-a] 不能从大往小写,有语法错误 shiy 特别字符集 $ 匹配输入字符串结尾位置(regexBuddy中待测试文本中多行算作一行...匹配(大小写)字母数字、下划线其中一个,与[a-zA-Z0-9_]效果相同 \W 匹配非字母数字、下划线之一 \s 匹配一个空格...(全局匹配) (php 中可以使用 preg_match_all()函数限制全局匹配) i 忽略大小写 m 将匹配内容视为多行 /u 表示按 unicode(utf-8)匹配(主要针对多字节比如汉字

    81130

    Angular: 最佳实践

    Note: 本文中,将尽量避免官方在 Angular Style Guide 提及模式和有用实践,而是专注自己经验得出东西,将用例子来说明。...限制类型。...实际情况并非如此,尽管将该标志设置 true 会导致发生意想不到复杂情况,当会让你代码管理得很好。 严格类型代码不容易出错,而 TS 刚好提供了类型限制,那么我们得好好使用它。...我们知道一个路由对应一个 Angular 组件,但是推荐你使用容器组件,它将处理数据(如果有数据需要传递的话)并将数据传递给另外一个组件,该组件将使用输入所包含真实视图和 UI 逻辑。...比如,你想在模版中未正确填写表单控件添加 has-error 类(也就是说并非所有的校验都通过)。

    2.8K40

    python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例

    ,允许输入文本显示格式值可以是: QLineEdit.Normal:正常显示所输入字符,此为默认选项 QLineEdit.NoEcho:不显示任何输入字符,常用于密码类型输入,且长度保密...(验证规则),将限制任意可能输入文本,可用校验器 QIntValidator:限制输入整数 QDoubleValidator:限制输入浮点数 QRegexpValidator:检查输入是否符合正则表达式...字母字符是允许输入,但不是必须输入 N ASCII字母字符是必须输入(A-Z,a-z,0-9) n ASCII字母字符是允许输入,但不是必须输入 X 任何字符都是必须输入 x 任何字符都是允许输入...,但不是必须输入 9 ASCII数字字符是必须输入(0-9) 0 ASCII数字字符是允许输入,但不是必须输入 D ASCII数字字符是必须输入(1-9) d ASCII数字字符是允许输入,...在这个例子中,演示了使用QLineEdit对象一些方法 第一个文本框e1,显示文本使用自定义字体,右对齐,允许输入整数 第二个文本框e2,限制输入小数点后两位 第三个文本框e3,需要一个输入掩码应用于电话号码

    2.1K21

    pyqt5 lineedit_pyqt5 tablewidget

    ,允许输入文本显示格式值可以是: QLineEdit.Normal:正常显示所输入字符,此为默认选项 QLineEdit.NoEcho:不显示任何输入字符,常用于密码类型输入,且长度保密...() 设置文本框显示文字 setMaxLength() 设置文本框所允许输入最大字符数 setReadOnly() 设置文本只读 setText() 设置文本内容 text() 返回文本内容...(验证规则),将限制任意可能输入文本,可用校验器 QIntValidator:限制输入整数 QDoubleValidator:限制输入浮点数 QRegexpValidator:检查输入是否符合正则表达式...字母字符是允许输入,但不是必须输入 N ASCII字母字符是必须输入(A-Z,a-z,0-9) n ASCII字母字符是允许输入,但不是必须输入 X 任何字符都是必须输入 x 任何字符都是允许输入...,但不是必须输入 9 ASCII数字字符是必须输入(0-9) 0 ASCII数字字符是允许输入,但不是必须输入 D ASCII数字字符是必须输入(1-9) d ASCII数字字符是允许输入

    1.3K20

    19.JavaScript

    常用数据类型 1.变量 局部变量必须一个 var 开头,如果未使用var,则默认表示声明全局变量 // 全局变量 name = 'derek'; function demo() { //...String.match( ) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个 String.replace( ) 替换,正则中有g则替换所有,否则只替换第一个匹配项; $数字:匹配第...n个组内容; $&:当前匹配内容; $`:位于匹配子串左侧文本; $':位于匹配子串右侧文本 $$:直接量$符号 String.charAt( ) 返回字符串中第n个字符 String.charCodeAt...非数字,等同于[^0-9] \s 空白字符 \S 非空白字符 \w 字母数字、下划线,等同于[0-9A-Za-z_](汉字不属于\w) \W 非字母数字、下划线,等同于...限制多选结构范围,标注量词作用元素,反向引用捕获文本 \1,\2...

    1K50

    全局变量结构(一)

    对于全局变量名称,字母被定义ASCII 65到ASCII 255范围内字母字符。如果全局名称以“%”开头(但不是“%Z”或“%z”),则此全局名称供InterSystems IRIS系统使用。...竖线(|)或左方括号([)-表示扩展全局引用或进程专用全局变量。使用取决于后续字符。 全局变量名称其他字符可以是字母数字或句号(.)字符。...例如,字符下标不能以控制字符作为其初始字符;整数下标中可以使用位数也有限制全局变量节点 在应用程序中,节点通常包含以下类型结构: 字符串或数字数据,包括本机Unicode字符。...例如,SQL引擎在为字符串值创建索引时,会将所有字符串值转换为大写字母,并在前面加上一个空格字符,以确保索引不区分大小写并且以文本形式排序(即使数值存储字符串)。...要保守地确定给定全局变量引用大小,请使用以下准则: 全局变量名称:每个字符加1。 对于纯数字下标:每个数字、符号或小数点加1。 对于包含非数字字符下标:每个字符添加3。

    75730

    【Flutter 专题】64 图解基本 TextField 文本输入框 (一)

    和尚最近在学习基础 Flutter Widget,原因在于很多基础组件有很多容易忽视注意事项,了解并熟悉后对整体开发认知会有所提升;今天和尚学习一下 TextField 文本输入框;...: Brightness.dark); textCapitalization 文字大小写;理论上 sentences 每句话第一个字母大写;characters 每个字母大写;words 每个单词首字母大写...,和尚理解整体分为数字键盘和字母键盘等;根据设置键盘类型,键盘会有差别; a....inputFormatters 格式验证,例如原生 Android 中通常会限制输入手机号或其他特殊字符,在 Flutter 中也可以借此来进行格式限制,包括正则表达式;使用时需要引入 package...WhitelistingTextInputFormatter 仅允许输入白名单中字符;如 digitsOnly 仅支持数字 [0-9]; c.

    4.6K51
    领券