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

在angular中添加formControl后,如何在没有settimeout的情况下将焦点切换到新的表单控件?

在Angular中添加formControl后,可以通过以下步骤在没有使用setTimeout的情况下将焦点切换到新的表单控件:

  1. 首先,在组件的构造函数中引入ElementRefRenderer2
代码语言:txt
复制
import { Component, ElementRef, Renderer2 } from '@angular/core';
  1. 在构造函数中注入ElementRefRenderer2
代码语言:txt
复制
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
  1. 在需要切换焦点的地方,使用ViewChild装饰器获取对应的表单控件:
代码语言:txt
复制
@ViewChild('newFormControl') newFormControl: ElementRef;

其中,newFormControl是在模板中给表单控件添加的#newFormControl引用。

  1. 在表单控件添加后,使用ngAfterViewInit生命周期钩子函数来设置焦点:
代码语言:txt
复制
ngAfterViewInit() {
  this.renderer.selectRootElement(this.newFormControl.nativeElement).focus();
}

这里使用Renderer2selectRootElement方法来选中新的表单控件,并使用focus方法将焦点设置到该控件上。

这样,在添加了formControl后,焦点将自动切换到新的表单控件上,而无需使用setTimeout延迟设置焦点。

请注意,以上代码示例中没有提及具体的腾讯云产品和链接地址,因为与云计算领域的问答内容无关。如需了解腾讯云相关产品和服务,请访问腾讯云官方网站。

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

相关·内容

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录笔记第三篇,介绍 angular表单控件相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...,然后控件每一个控件作为属性值添加到实例 import { Component, OnInit } from '@angular/core'; // 引入 FormControl 和 FormGroup...同模板驱动表单数据有效性验证相同,响应式表单同样可以使用原生表单验证器,设定规则时,需要将模板控件名对应数据值第二个参数改为验证规则 响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应...4.4、表单自定义数据验证 4.4.1、自定义验证器 很多情况下,原生验证规则无法满足我们需要,此时需要创建自定义验证器来实现 对于响应式表单,我们可以定义一个方法,对控件数据进行校验,之后方法作为参数添加控件定义处即可...模板驱动表单,因为不是直接使用 FormControl 实例,因此这里应该在模板上添加一个自定义指令来完成对于控件数据校验 使用 angular cli 创建一个用来进行表单验证指令 ng

18.9K20

(转) 别再对 Angular 表单 ControlValueAccessor 感到迷惑

来实现一种针对 Angular 表单数据通信机制。...本文我将使用原生表单控件术语来区分 Angular 特定 formControl 和你 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件...,当 Angular 组件模板遇到 input 或 textarea DOM 原生控件时,会使用DefaultValueAccessor 指令: @Component({ selector:...组件封装器 由于 Angular 为所有默认原生控件提供了控件值访问器,所以封装第三方插件或组件时,需要写一个控件值访问器。...由于我们实现组件通信方式,所以不需要标准输入输出属性绑定方式,那就移除相关代码吧。

3.7K20

Angular Form (响应式Form) 学习笔记

Angular 响应式表单使用显式、不可变方式,管理表单在特定时间点上状态。对表单状态每一次变更都会返回一个状态,这样可以变化时维护模型整体性。...要使用响应式表单控件,就要从 @angular/forms 包中导入 ReactiveFormsModule,并把它添加到你 NgModule imports 数组。...import { ReactiveFormsModule } from '@angular/forms'; 然后,生成一个 FormControl 实例,并把它保存在组件。...要注册一个表单控件,就要导入 FormControl 类并创建一个 FormControl 实例,将其保存为类属性。...有时实际开发,我们还能看到 FormGroup 使用例子: Form Group 即表单组,定义了一个带有一组控件表单,你可以把它们放在一起管理。

2.1K10

Angular6自定义表单控件方式集成Editormd

ControlValueAccessor 这是自定义表单组件核心,只有继承这个接口,才有被 AngularformControl识别的资格。...(isDisabled: boolean): void; } writeValue:初始化时候formControl值传递给原生表单控件(即,模型值写入视图或 DOM 属性); registerOnChange...:用来获取原生表单控件值更新时通知Angular表单控件更新函数(即,设置当控件接收到 change 事件,调用函数) registerOnTouched:用来获取通知用户正在交互函数(即,设置当控件接收到...- 用于 select 选择控件 - CheckboxControlValueAccessor - 用于 checkbox 复选控件 至于原生表单控件Angular表单控件能够保持一致原理,可以看下... 参考资料 Angular 4.x 自定义表单控件 【荐】深入Angular自定义表单控件 Angular集成Editor.mdMarkdown编辑器,支持NgModel

5.2K20

Angular系列教程-第四节

1.表单 Angular 提供了两种不同方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改途径 使用’@angular/forms’库FormGroup, FormControl,FormArray...,FormBuilder 等类构建出数据对象就是响应式表单,响应式表单,我们会在数据源里面进行各种操作,像添加校验等,html文件中使用 formGroup,formGroupName,formControlName...等数据和视图进行绑定(需要引入ReactiveFormsModule) 模板驱动表单是我们实例化好一个类数据之后,html中使用 NgForm 指令数据和表单进行绑定,使用[(ngModel...) 表单验证 同步验证器和异步验证器 备注:同步验证先执行,异步验证执行 3.模板驱动表单使用 导入formcontrol 使用ngModel实现双向绑定 使用模板变量来获取表单 4

2.8K50

通过一个实际例子学习 combineLatest

元素显示个数,而 offset 控制显示元素索引: 例如我 offset 改为 1 时,显示元素 从 ivysaur 开始: 首先我设计了一个 form 表单,里面包含了两个 input 控件...limit$ 没有发生变化时,不会向下游 emit 数据。...data,数据结构为数组,第一个元素是 limit 包含值,第二个元素为 offset 包含值: 这两个值经过 map 处理,投递给服务 pokemonService....offset=7&limit=6 这个 api 公网上可以用于学习目的使用: 这里有一个小问题:每次我浏览器里修改 limit 值时: form control valueChanges...事件会触发两次: 这是 Angular 框架一个已知问题: https://github.com/angular/angular/issues/12540 为了使用 formControl 这个指令

2.7K10

Angular2 :从 beta 到 release4.0 版本升级总结

它标记出该模块拥有的组件、指令和管道, 并把它们一部分公开出去,以便外部组件使用它们。 它可以向应用依赖注入器添加服务提供商。 具体请参考官方文档。.../commom'; => import {FormControl} from '@angular/forms'; 原使用[ngFormModel]属性 更改表单属性 [ngFormModel] 为 [...组件迁移,无法正确订阅事件 原因:angular(v4.0.0)依赖注入,若在不同地方声明provider,则会创建不同实例。...webstorm里,更改文件不能在浏览器更新输出。 原因:webstorm里面默认启用”safe write”,保存先存到临时文件。...使用angular-cli无法自定义webpackalias, 导致文件引入路径很长,../../../shared/。

8.1K00

Angular 应用级别的依赖 Fake

为了好玩,我们添加文本管道以我们组件模板中使用常见字符串操作。...如前所述,我们不会使用元素注入器模板以声明方式动态替换用户代理令牌。 相反,我们强制更改状态。...它有一个绑定到本机 select 控件表单控件。 选择浏览器,我们开始通过浏览器服务伪造其用户代理。 选择默认浏览器选项,我们会停止伪造用户代理。...现在,剩下就是弃用横幅和浏览器伪装器添加到我们应用程序。 <!...我们浏览器状态封装在一个基于类服务,并让应用程序依赖它。 这与浏览器伪造者使用服务相同。 浏览器伪造器是 Angular 应用程序伪造依赖项一个简单示例。

2.1K20

Angular5.0.0特性

5.0版本Angular开发团队添加了ServerTransferStateModule(与之对应BrowserTransferStateModule),这个模块允许你服务端生成模块信息并传输到客户端...4.国际化号码、日期和货币管道   Angular5已经建立了号码,日期和货币管道,增加了跨浏览器标准化实现,消除国际化不同环境差异。...} ); 7.exportAs多命名支持   5.0提供了组件/指令多命名支持,在对用户不修改代码情况下进行组件迁移操作等非常有用,一个组件导出多个名字,可以让组件已一个新名字来使用而达到不破坏现有代码目的...8.HttpClient   4.3HttpClient模块被封装在@angular/commonHttpClient被封装在@angular/common/http,更新Http模块...9.CLI v1.5   Angular CLI v1.5版本已经添加了对5.0版本支持,后期将会把v5.0.0作为CLI默认版本。

1.7K10

SAP UI5和Angular函数防抖(Debounce)和函数节流(Throttle)实现原理介绍

这就好比Jerry本文开头提到例子:既然我短时间内输入了字符1234,我期望UI看到,是后台服务接收到1234返回结果。...代码第20行,使用setTimeout重启超时时间间隔为3秒计数器,3秒过后,如果JavaScript任务队列里没有其他待执行任务,则执行原始函数fn....如果在等待3秒之内,没有函数调用触发,则3秒过后,执行21行原始函数fn;这好比电梯3秒之内,始终没有乘客进入,则 3秒过后,电梯门自动关闭。...函数节流版本构造器使用方式,同函数防抖版本构造器没有差别:原始函数sendRequest传入构造器throttle,返回一个具有节流功能函数throttleVersion,Input控件liveChange...类似SAP UI5 Input控件liveChange,Angular FormControlvalueChanges也给应用开发人员提供了编写业务逻辑,响应用户输入位置:后者valueChanges

1.3K20

Angular 2 表单(下)

每一个 input 元素都有一个 name 属性, Angular 表单模块需要使用它为表单注册控制器。 运行以上实例输出结果如下: {{diagnostic}} 只是用于测试时候输出数据使用。...ng-invalid 这样我们就可以添加自定义 CSS 来反应表单状态。...删除掉 name 字段数据,显示结果如下所示: 添加一个网站 接下来我们创建一个用于添加网站表单 app/site-form.component.html 添加一个按钮: app/site-form.component.html...当我们添加一个网站时,它把 active 标记设置为 false , 然后通过一个快速 setTimeout 函数迅速把它设置回 true 。...通过 ngSubmit 来提交表单 我们可以使用 Angular 指令 NgSubmit 来提交表单, 并且通过事件绑定机制把它绑定到 SiteFormComponent.submit() 方法上。

1.6K10

如何使用AngularJS和PHP为任何位置生成短而独特数字地址

输入此信息,您API密钥显示屏幕上。将其复制并存储可以轻松检索位置,因为稍后您需要将其添加到项目代码。 获取API密钥,您可以通过创建MySQL数据库来开始构建应用程序基础。...我们继续编辑该index.php文件,Google地图控件添加到此应用,完成,用户将能够查看输入表单旁边地图,将其拖动以查看不同位置,放大和缩小,以及Google之间切换地图,卫星和街景。...保存文件,然后再次浏览器访问该应用程序。您将看到以下内容: 您所见,我们已成功地图添加到应用程序。您可以拖动地图以聚焦不同位置,放大和缩小,以及地图,卫星和街道视图之间切换。...回顾刚刚添加代码,请注意我们还添加了两个标签控件,它们显示表单上输入地理坐标和物理地址: . . ....保存此文件,然后再次访问您应用程序。状态字段输入US-NY然后单击TAB以输入焦点更改为下一个字段。您将看到以下输出: 请注意,您在表单输入地理坐标和物理地址显示地图下方。

13.1K20

AngularDart4.0 指南- 表单

添加angular_forms Angular表单功能位于angular_forms库,该库位于其自己。 将该包添加到pubspec依赖项: ?...你还没有使用Angular没有绑定或额外指令,只是布局。 模板驱动表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...您将在表单添加一个select,并使用ngFor(先前“显示数据”页面中看到一种技术)选项绑定到powers列表。...如果没有Angular帮助,你需要做什么才能将按钮启用/禁用状态连接到表单有效性? 对你来说,这很简单: (增强表单元素上定义一个模板引用变量。 多处按钮引用该变量。...显示Model(可选) 提交表单目前没有视觉效果。 预期演示。 增加代码过后demo不会教你任何关于表单新东西。 但是这是一个锻炼一些获得绑定技巧机会。

17.4K30

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式动态表单框架,不仅支持自动生成表单、易于上手自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema,还有开箱即用内置表单主题...FormlyModule.forChild(), FormlyNgZorroAntdModule, ], ... }) export class WelcomeModule {} 第二步:页面添加...; 使用 Formly 内置验证: 新用户注册表单基础上增加输入年龄字段配置,再为每个字段配置 props 增加 required 属性,表示这是一个必填字段,就像新用户注册表单中用户名字段一样...label}仅支持录入中文`, }, }, } 为字段添加自定义验证函数: 接着为注册用户表单添加字段:邮箱、身份证、手机号,分别非这三个字段自定义校验函数: 全局注册自定义校验函数,...CardPanel 组件类,但要记得 CardPanel 组件提前注册再使用; 创建自定义 Extensions 自定义扩展可以为实现动态表单提供更加便利帮助,如在系统通常相同 key 表单需要对应相同

32610

使用 RxJs Observable 来避免 Angular 应用 Promise 使用

这应该只是一个带有 foo 一词请求,而不是两个,即使我们搜索框中有 foo 从技术上讲停止了两次。 3.处理乱序响应 当我们同时有多个请求进行时,我们必须考虑它们以意外顺序返回情况。...为简单起见,我们演示只包含两个文件:app.ts 和 wikipedia-service.ts。 不过,现实世界,我们很可能会将事情进一步拆分。...要使用此指令,我们首先需要将 ReactiveFormsModule 导入到我们应用程序模块。 导入,我们可以模板中使用 formControl 并将其设置为名称“term”。... 我们组件,我们从@angular/form 创建了一个 FormControl 实例,并将其公开为组件上名称...这将返回一个 Observable,它只会在 400 毫秒内没有值出现时才发出新值。 这个对象会在我们期望时间间隔之后,才会发生值。

2.7K10

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

用户设计器中进行更改,只需单击一下,就可以使用修改Angular标记更新原始HTML文件。...例如,您可以通过添加适当类型系列元素,轻松地趋势线添加到图表“属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。...单击“添加项”链接以图表系列添加到集合末尾。 单击新添加项目右边缘向下箭头,然后从可用系列类型列表中选择TrendLine。 新添加项目现在显示为[趋势线]。...随着趋势线添加到图表,设计界面现在看起来像这样: 独立模式下,没有要更新源文件,但您仍然可以生成Angular标记并将它们从设计器复制到HTML源。...在这种情况下,设计器以斜体显示只读文本框绑定。 保存操作期间保留绑定事件; 但是,设计器没有用于创建或编辑它们界面。

5.3K40

linux修改用户权限与所属组_linux修改用户组权限

这里可能新建组:groupadd group 及 groupadd adm 增加用户账号就是/etc/passwd文件为新用户增加一条记录,同时更新其他系统文件,/etc/shadow,/etc/...ViewController容器 产品增加版面,类似于网易新闻,百度新闻,腾讯新闻等新闻客户端首页多屏幕滑屏切换,找了一些开源代码研 … js,onblur后下一个控件获取焦点判断、html...当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&;setInterval 需求: input控件失去焦点直接做验证,验证通不过的话,显示相应错误....但是如果失去焦点后点击下个控件是比较特殊控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止系统退出前,还显 … Enter键提交表单 input type=”submit”360浏览器上不能提交...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站立刻删除。

7.1K30
领券