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

Angular2 FormArray -在页面上显示文本区字符数-如何?

Angular2 FormArray是Angular框架中的一个表单控件,用于处理动态表单数组。它允许我们在页面上显示多个文本区,并且可以获取每个文本区的字符数。

要在页面上显示文本区字符数,我们可以按照以下步骤进行操作:

  1. 首先,在组件中创建一个FormArray对象,并将其初始化为空数组。
代码语言:typescript
复制
import { Component } from '@angular/core';
import { FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <div formArrayName="textAreas">
      <div *ngFor="let control of textAreas.controls; let i = index">
        <textarea [formControlName]="i"></textarea>
        <p>Character count: {{ getCharacterCount(control.value) }}</p>
      </div>
    </div>
  `,
})
export class ExampleComponent {
  textAreas: FormArray;

  constructor() {
    this.textAreas = new FormArray([]);
  }

  getCharacterCount(value: string): number {
    return value.length;
  }
}
  1. 在模板中使用ngFor指令遍历FormArray中的每个控件,并为每个控件创建一个文本区域。使用formControlName指令将控件与表单绑定,并在下方显示字符数。
  2. 在组件中定义一个getCharacterCount方法,用于获取文本区的字符数。该方法接收文本区的值作为参数,并返回字符数。

这样,当用户在页面上输入文本时,字符数会实时更新并显示在对应的文本区下方。

关于Angular2 FormArray的更多信息,您可以参考腾讯云的相关文档和产品:

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

相关·内容

java Swing用户界面组件文本输入:文本域+密码域+格式化的输入域

US地区,逗号是十进制的分隔符,允许用户输入如1,729的数值。卷II的国际化章节中将详细地解释如何选择其他的地区。...I型光标文本域中也不见了。键盘输入将作用于另一个组件。 当格式化的文本域失去焦点时,格式器查看用户输入的文本字符串。如果格式器知道如何把文本字符串转换为对象,文本就有效,否则就无效。...图9-14显示了一个工作的文本区JTextArea组件构造器中,可以指定文本区的行数和列。...如果文本区的文本超出显示的范围,剩下的文本就会被剪裁掉。...如果文本超出了文本区可以显示的范围,滚动条就会自动出现,并且删除部分文本后,当文本能够显示本区范围内时,滚动条会再次消失。滚动是由滚动窗格内部处理的,编写程序时无需处理滚动事件。

4.1K10
  • 前端小技能,10个基本组件的代码片段

    一 文本输入框 1 简介 HTML的表单控件中,用得最多就是文本框控件,支持输入中文,英文,特殊字符,汉字等。...size:用于表示控件的长度,使用字符数量来表示长度。 maxlength:用于表示文本框可输入的最大字符。 value:对于文本框来说,value属性的值即为显示文本框中的内容。...size:用于表示控件的长度,这里貌似是使用字符数量来表示长度。 maxlength:用于表示密码框可输入的最大字符。...属性如下: autofocus:当页面加载时,文本区域自动获得焦点(值:autofocus)。 cols:文本区域内可见的列(值:number)。...disabled:禁用文本区域(值:disabled)。 form:定义文本区域所属的一个或多个表单(值:form_id)。 maxlength:文本区域允许的最大字符(值:number)。

    2.3K10

    Angular2 VS Angular4 深度对比:特性、性能

    那么,本文将会对Angular2和Angular4进行深度对比,以便帮助大家更好的了解这两个版本。 Angular2 Angular22015年底发布的。...接下来一起了解Angular2这个版本发布的原因以及如何将其添加到Web开发中。 ...动态载入: 这是之前的Angular版本均不具备的功能,Angular2包含了这个功能,即使开发人员忙碌时,也能够添加新的指令或控件。 模板: Angular2中,模板编译过程是异步的。...装饰器指令:可用于装饰元素(例如,通过隐藏/显示元素ng-hide/ng-show或添加工具提示)。 模板指令:可以将HTML转换为可复用的模板。...此外,它的异步字符允许开发人员管道中,实现对用户进行身份验证或加载控件信息的服务器请求。

    8.7K20

    干货 | 前端阶段性总结之「框架相关」那些事

    不只是Angular1到Angular2的重新设计,甚至是Angular2自身的更新也不全兼容。但不得不说,虽然对用户不是非常友好,其实仔细品味的话,Angular有很多很棒的理念和设计的。...这也是一个比较有意思的概念吧,大家可以参考《深度剖析:如何实现一个 Virtual DOM 算法》。...02 框架全家桶 模板引擎 对于模板引擎,其实前端技术模板也就分为几种: String-based模板技术(基于字符串的parse和compile过程) Dom-based模板技术(基于Dom的link...或compile过程) 杂交的Living templating技术(基于字符串的parse和基于dom的compile过程 具体的说明大家可以参考《一个对前端模板技术的全面总结》,感觉还是总结得不错的...毕竟这是个很简单的部件,但是却是单应用不可或缺的部分。

    96020

    Scratch3.0——助力新进程序员理解程序(七、运算)

    面上会出现这个图标,我们直接双击这个图标就能使用了。 1、菜单栏         编辑器左上边的区域是程序菜单栏,主要是修改语言,创建新程序,上传程序,保存程序的操作面板。...操控区的 “代码”标签中,提供了“运动”“外观”“声音”“事件”“控制”“侦测”“运算”“变量”和“自制积木”9个大类、100多个积木供我们使用。这些不同类型的积木用不同的颜色表示。...我们可以把这些积木拖放到脚本区,组合成各种形式,从而完成想要实现的程序。 3、代码区 编辑器的中间部分是代码区,我们就是在这里对积木进行各种组合,使用和操控角色的造型、舞台背景以及声音等。...左下方是角色列表区,显示了程序中的不同的角色;右边是舞台背景列表区,显示了程序中使用的舞台背景的信息。...四则运算 四则运算这里很直接,而且是个圆的,其实字符串类型的都是圆的。 这里示例就能对应的运算描述出来: 随机 这个游戏中用处特别大,基本的概率,模拟机器人操作都是利用这个。

    35020

    H5上传文件又双叒叕开测了!

    ; 4.在其他点击logo,返回H5首H5首点击logo,仍在H5首; 上传素材: 一、H5与PC端的素材同步关系: 1.H5上传的素材页面只显示通过H5上传的素材,PC上传的素材不同步至H5...: (1)音频封面用默认图,封面上标注“音频”及音频时长,右侧展示音频标题,上传时间,文件大小; (2)上传音频的文件标题显示两行,超过两行显示不下用...表示; (3)音频文件支持上传mp3、wav格式文件...,顶部logo和“编辑”按钮应始终固定在顶部; 12.H5上传文件列表及文件分享主流浏览器及客户端下访问,功能正常、页面显示正常:微信、微博、QQ、Safari浏览器、UC浏览器、QQ浏览器、搜狗浏览器...,则立即将视频和博分享到微博; 预览: 1.点击预览,跳转到新页面,底部显示“生成预览中”,5秒后提示消失; 2.预览页面显示logo和用户头像及昵称,博,视频,“复制预览链接”; 3.若视频上传了封面...,请稍后”,分享完成后toast提示“分享成功”,PC-我的分发记录中可查看分发记录及分发状态; 2.成功分发后,分发的视频应支持播放,视频博显示正常,可正常浏览和转发等操作; 以上 That's

    1.7K20

    零代码爬虫神器 -- Web Scraper 的使用!

    爬取完数据后,不会立马显示面上,需要你再手动点击一下 refresh 按钮,才能看到数据。 最后数据同样是可以导出为 csv 或者 xlsx 文件。 3....分页器可以分为两种: 一种是,点 下一 就会重新加载一个页面 一种是:点 下一 只是当前页面的部分内容重新渲染 早期的 web-scraper 版本中,这两种的爬取方法有所不同。...二级页面的爬取 CSDN 的博客列表列表,展示的信息比较粗糙,只有标题、发表时间、阅读量、评论,是否原创。...想要获取更多的信息,诸如博的正文、点赞、收藏、评论区内容,就得点进去具体的博链接进行查看 web scraper 的操作逻辑与人是相通的,想要抓取更多博的详细信息,就得打开一个新的页面去获取...例如你可以爬取自己发表 CSDN 上的所有博信息,包括:标题、链接、文章内容、阅读数,评论、点赞,收藏

    1.6K10

    Android开发笔记(一百四十六)仿支付宝的支付密码输入框

    然而,计划赶不上变化,开发工作中总有一些现有控件无法直接实现的需求,就像支付宝的支付密码输入框,一排方格区域内输入并显示密码,每个密文字符之间又有竖线分隔。...当然,界面展现上,需要以横排方格的形式加以显示。于是可以考虑,把支付密码的输入与显示操作分离开来,即密码输入操作仍由EditText处理,而密码显示操作则由自定义的方格布局接管。...,每当密码输入或者删除之时,就通知方格布局更新密显示;同时还得监控输入字符是否达到6位,如果达到6位就触发密码完成事件; 对于接管密码显示的方格布局来说,需要实现以下几项操作: 1、建立一个密码文本队列...,决定当前显示明文还是密;如果是密,则显示哪个密文字符; 5、每当EditText里的文本发生变更之时,相应更新TextView队列的各项文本显示; 上述的改造内容,大部分都有可以直接调用的函数,...Context mContext; private EditText mEditText; // 文本编辑框,实际看不见 private LinearLayout mShowLayout; // 真正显示着的文本区

    1.9K30

    【文本检测与识别-白皮书-3.1】第二节:基于分割的场景文本检测方法

    Zhang 等人(2016)的工作首次将文本像素分类预测用于自然场景文本检测任务当中,该方法首先通过一个FCN 预测得到文本区域的分割显著图。然后利用MSER 检测算子本区域内提取候选字符。...Yao 等人(2016)利用FCN 同时预测文本行区域、单字符区域以及字符连接方向,对同一个文本区域的字符构建一个图,利用字符之间的位置和方向的相似度把图划分成若干子图,每个子图都对应着一个文本实例。...Deng 等人(2018) 提出的Pixel-Link 则是预测像素点与相邻的8 个像素点之间的连接关系(若两个像素点都属于同一本区域,则两者判定为连接关系),基于这样的信息可以有效组合属于同一本的像素点...因此,如何鲁棒地把文本片段拼接成文本实例是这一类方法的难点。...embedding),训练过程中使同一个文本实例内部的字符的嵌入式向量尽可能地接近,反之则尽可能地远离,通过这种方式可以把属于同一个文本实例的字符区域聚合在一起。

    96710

    用Python写了一个图像文字识别OCR工具

    博主基于 PyQt + labelme + PaddleOCR 写了一个桌面端的OCR工具,用于快速实现图片中文本区域自动检测+文本自动识别。...功能列表 文本区域检测+文字识别 文本区域可视化 文字内容列表 图像、文件夹加载 图像滚轮缩放查看 绘制区域、编辑区域 复制所选文本识别结果 OCR部分 图像文字检测+文字识别算法,主要借助 paddleocr...ui界面上的控件可以通过self._ui.xxxObjectName 访问。...打开图片→选择语言模型ch(中文)→选择文本检测+识别→点击开始,检测完的文本区域会自动画框,并在右侧识别结果——文本Tab的列表中显示。...所有检测出文本的区域列表,识别结果——区域Tab: 软件代码 由于时间有限,软件细节功能还需进一步完善。代码已开源到 gitee 上,欢迎感兴趣的朋友提pull request,共同修改完善。

    4.6K30

    玩转谷歌优化(Google Optimize)

    我们今天要向大家介绍如何玩转谷歌优化。 几个月前(源发表于2016年12月),谷歌宣布了向公众提供免费版的“谷歌优化360”。去年12月,收到“谷歌优化”开通邀请的人就能拥有使用该工具的访问权限。...例如,如果你正在博客页面上运行实验,请输入一个进入博客的URL。 之后你就可以使用实验定向将更改应用于部分或全部博。 03 选择要运行的实验类型。以下是三个基本的选项: A/B测试。...同一(或页面模板)上测试具有两个或多个不同部分的变体。当你想尝试同一面(或页面模板)上测试多个元素的组合时,多变量测试则是一个非常好的选择。 重定向测试。 用于测试不同URL或路径的网页。...如果你知道如何使用CSS选择器,你可以使用这个功能深入挖掘DOM。这是修改页面上每个元素的最简单的方法。...一旦选中,框架左上角的蓝色选项卡将显示已选择的元素,元素层次栏也将更改,以显示该元素如何嵌套在HTML中。

    3.8K70

    AngularDart Material Design 输入 顶

    请改用angular2 forms API disabled bool  是否禁用此输入(只读输入) displayBottomPanel bool  是否显示错误,提示文本和字符计数器面板...leadingText String  要在输入的前沿显示的任何文本 - 例如货币符号或类似物。 maxCount int  字符计数输入框允许的最大字符。...如果没有文本框中输入任何内容,则显示默认文本。当用户输入文本时,它会消失。 maxCount int  字符计数输入框允许的最大字符。...可以是整数,也可以是字符串。 showCharacterCount bool 即使maxCount为null,也显示字符。...loading bool  打开时没有可用的建议,请在建议下拉列表中显示加载指示符。 maxCount int 字符计数输入框允许的最大字符

    5.3K40

    Twitter新政:变革140字推限定背后,Twitter有何新目标?

    我们听听Twitter产品经理Todd Sherman如何讲述?...现在这个产品和应用已经能够发送包含照片、图片、视频、投票等推特数据特性的推。 今天,我们非常兴奋的宣布接下来的几个月将要发生的一些变化,推特将允许人们140个字符里表达更多的信息。...我们简化了推特上回复和增加附件的工作,把推上的某些“骨架”移到显示元素,使它们不再受到字符的限制。...iOS、安卓和Web上显示的时间轴; ◆ ◆ ◆ 推特目标变化 如下几个方面会在推有效内容中发生变化: · 推文中显示的文本不超过140个字符,但当用户名或附件URL包含在推文中的某些点时...· 文本逻辑上会被分成三个区域: o 隐藏的前缀区域,可能会包含一个或多个空格分离的@mentions,这部分不会被认为是显示文本的一部分,但是会被认为是元数据; o 显示本区域,依然是

    1.9K60

    五、文章详情制作及跳转功能实现《iVX低代码无代码个人博客制作》

    一、详情制作 之前的章节中,我们已经制作完毕了登录、注册、首页等内容,在这一节中,我们编写详情以及详情功能制作。...,防止每个内容过于靠近边界: 接着在内容区创建一个富文本用于显示内容: 此时富文本需要给定一个固定高度: 接着我们评论区中创建评论区内容,一个是输入的输入框一个是一个评论按钮:...,那么此时我们必然需要知道点击的是那一个文章,那么在数据库中,文章ID则表示当前数据,为当前数据的身份ID,那么此时我们得在当前页面上新建一个变量用于存储点击到的页面ID: 接着,由于是从首页点击了数据到达当前的详情...随后直接获取把获取到的数据值给予到容器就可以了: 接着我们创建一个 for 循环,把内容存放for 循环之中: 选择对应的数据来源为循环创建: 接着给予之后的内容数据绑定,设置阅读量的时候需要对应的数据进行字符串拼接...,字符串内容需要对应的双引号引起来: 随后再绑定其他内容: 最后显示如下: 接下来预览界面: 数据成功进行了显示,那么接下来点击当前内容后应该跳转页面到对应的详情之中

    69440

    Swing常用组件

    一、标签 Swing的 JLabel 类对 AWT 的 Label 类进行功能扩展,创建的标签不仅可以显示文本字符,而且可以显示图标。...Swing 为 JTextField 定义了一个子类 JPasswordField,专门用来输入“密码”的单行文本框;即对用户输入的字符采用密的形式进行显示,如“****”。...以下是JTextArea的一些常用成员方法: append(String str): 本区域的末尾追加指定的字符串。...insert(String str, int pos): 本区域的指定位置插入指定的字符串。 setText(String str): 设置文本区域的文本内容为指定的字符串。...而AWT中的 List初始化列表时,不能添加列表选项;此外,JList 所创建的列表的选项可以是任何类型,不再局限于文本字符串。

    10710

    Scratch3.0——助力新进程序员理解程序(八、字符串函数)

    面上会出现这个图标,我们直接双击这个图标就能使用了。 1、菜单栏         编辑器左上边的区域是程序菜单栏,主要是修改语言,创建新程序,上传程序,保存程序的操作面板。...操控区的 “代码”标签中,提供了“运动”“外观”“声音”“事件”“控制”“侦测”“运算”“变量”和“自制积木”9个大类、100多个积木供我们使用。这些不同类型的积木用不同的颜色表示。...我们可以把这些积木拖放到脚本区,组合成各种形式,从而完成想要实现的程序。 3、代码区 编辑器的中间部分是代码区,我们就是在这里对积木进行各种组合,使用和操控角色的造型、舞台背景以及声音等。...区域的右上角是全屏按钮,点击它,舞台会扩展为全屏模式。全屏模式下,舞台区的右上角会出现按钮,点击它可以退出全屏模式。...---- 字符串函数 这里共计提供了4个字符串函数,我们来逐一理解一下。 字符串链接 输入字符串: 字符串拼接效果:  这个在后期显示内容的时候我们经常会用到,可以多层嵌套的一个功能。

    42740

    Scratch3.0——助力新进程序员理解程序(案例一十一、大象吃苹果)

    面上会出现这个图标,我们直接双击这个图标就能使用了。 1、菜单栏         编辑器左上边的区域是程序菜单栏,主要是修改语言,创建新程序,上传程序,保存程序的操作面板。...操控区的 “代码”标签中,提供了“运动”“外观”“声音”“事件”“控制”“侦测”“运算”“变量”和“自制积木”9个大类、100多个积木供我们使用。这些不同类型的积木用不同的颜色表示。...我们可以把这些积木拖放到脚本区,组合成各种形式,从而完成想要实现的程序。 3、代码区 编辑器的中间部分是代码区,我们就是在这里对积木进行各种组合,使用和操控角色的造型、舞台背景以及声音等。...左下方是角色列表区,显示了程序中的不同的角色;右边是舞台背景列表区,显示了程序中使用的舞台背景的信息。...总结 【大象吃苹果】这个案例的难度适中,小朋友完全可以掌握,自己改一下移动步会有不一样的效果呢,好好玩耍一下,挺好的。

    20940
    领券