在Angular中动态创建控件时不呈现formControlName

在Angular中，如果要动态创建控件并且不需要使用formControlName来呈现控件，可以使用Reactive Forms中的FormControl和FormGroup来实现。

首先，需要导入Reactive Forms模块：

import { ReactiveFormsModule, FormControl, FormGroup } from '@angular/forms';

然后，在组件中创建一个FormControl或者FormGroup对象来表示动态创建的控件：

// 创建一个FormControl对象
const dynamicControl = new FormControl();

// 创建一个FormGroup对象
const dynamicGroup = new FormGroup({
  dynamicControl: new FormControl()
});

接下来，可以在模板中使用动态创建的控件。例如，使用FormControl对象：

<input [formControl]="dynamicControl" type="text">

或者使用FormGroup对象：

<form [formGroup]="dynamicGroup">
  <input formControlName="dynamicControl" type="text">
</form>

需要注意的是，如果使用FormControl对象，需要将其绑定到对应的input元素上，而如果使用FormGroup对象，则需要将其绑定到form元素上，并使用formControlName来指定控件的名称。

关于Angular中动态创建控件的更多信息，可以参考官方文档：

Reactive Forms

腾讯云相关产品和产品介绍链接地址：

相关·内容

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

一、Overview angular 入坑记录的笔记第三篇，介绍 angular 中表单控件的相关概念，了解如何在 angular 中创建一个表单，以及如何针对表单控件进行数据校验。...响应式表单建立表单由组件隐式的创建表单控件实例在组件类中进行显示的创建控件实例表单验证指令函数在表单数据发生变更时，模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新，...4.3.2、通过 FomGroup 组合多个控件一个表单不可能只有一个控件，通过在组件中构造 FormGroup 实例来完成对于多个表单控件的统一管理在使用 FormGroup 时，同样在组件中定义一个属性用来承载控件组实例...，在设定规则时，需要将模板中控件名对应的数据值的第二个参数改为验证的规则在响应式表单中，数据源来源于组件类，因此应该在组件类中直接把验证器函数添加到对应的 FormControl 的构造函数上。...在模板驱动表单中，因为不是直接使用的 FormControl 实例，因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K2 0

如何对动态创建控件进行验证以及在Ajax环境中的使用

首先给一个常规的动态创建控件，并进行验证的代码 [前端aspx代码] <asp:Button ID="btnAddControl" runat="server" Text="动态创建控件...Cell); this.Table1.Rows.Add(Row); btnValidator.Enabled = true; } } 运行测试，点击"动态创建控件... runat="server"> 再次运行，发现没办法再对动态生成的控件进行验证了(也就是说，新创建的验证控件没起作用)

7.7K5 0

Angular系列教程-第四节

两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型，并提供跟踪这些更改的途径使用’@angular/forms’库中的FormGroup, FormControl，FormArray...,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中，我们会在数据源里面进行各种操作，像添加校验等，在html文件中使用 formGroup,formGroupName,formControlName...总结响应式表单是动态的，模板驱动表单是固定的 2.响应式表单使用注册ReactiveFormsModule 组件导入FormControl 模板中注册组件控件的值（获取setvalue...minLength 此验证器要求控件值的长度大于等于所指定的最小长度。当使用 HTML5 的 minlength 属性时，此验证器也会生效。...maxLength 此验证器要求控件值的长度小于等于所指定的最大长度。当使用 HTML5 的 maxLength 属性时，此验证器也会生效。 pattern 此验证器要求控件的值匹配某个正则表达式。

2.8K5 0

Angular 2 + 折腾记：(7) 初步了解表单：模板驱动及数据驱动及脱坑要点

前言表单在整个系统中的作用相当重要，这里主要扯下响应表单的实现方式。...首先需要操作表单的模块引入这两个模块； import { FormsModule, ReactiveFormsModule } from '@angular/forms'; ---- 表单控件响应的几种状态...()函数内，在点击提交的时候对整个表单一一去判断，传统方式基本这样每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定的值校验 ---- 数据驱动(Reactive...Form) 响应式表表单：原理是一开始就构建整个表单，表单的值通过特殊指令formControlName一一关联(类似ngModel); 相关名词： FormGroup: 用来追踪表单控件有效状态及值... 不超过十个字

3.8K2 0

理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

在 Rx--隐藏在Angular 2.x中利剑一文中我们已经初步的了解了 Rx 和 Rx 在 Angular 的应用。今天我们一起通过一个具体的例子来理解响应式编程设计的思路。...Angular 中处理响应式表单只有 3 个步骤： 1、在组件的 HTML 模版中给要处理的控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...这两个数据流其实是来自于两个控件的值的变化，而响应式表单获取值的变化是非常简单的就一行：上面这行代码的意思是从表单的控件数组中取得 formControlName 为 age 的这个控件然后监听其值的变化...所幸的是，Angular 提供了对于响应式编程非常友好的设计，我们完全可以不在代码中做订阅或取消订阅的动作。那么问题来了，不订阅的话，值怎么获得呢？答案是 Async 管道。...Async 会在组件初始化时自动的订阅以及在组件销毁时自动取消订阅，太爽了。

5.2K1 0

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

如果你使用响应式表单，你需要显式创建 FormControl 对象，并使用 formControl 或 formControlName 指令来绑定原生控件；如果你使用模板驱动方法，FormControl...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你在 html 使用的表单控件，但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互，而不是原生表单控件如...image.png 再次强调，不管是使用响应式表单显式创建还是使用模板驱动表单隐式创建，ControlValueAccessor 都总是和 Angular 表单控件进行交互。...，当 Angular 在组件模板中中遇到 input 或 textarea DOM 原生控件时，会使用DefaultValueAccessor 指令： @Component({ selector:...组件封装器由于 Angular 为所有默认原生控件提供了控件值访问器，所以在封装第三方插件或组件时，需要写一个新的控件值访问器。

3.7K2 0

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

]为formControlName => 若要在[ngFormModel...组件迁移后，无法正确订阅事件原因：angular(v4.0.0)中依赖注入，若在不同地方声明provider，则会创建不同的实例。...解决办法：目前在路由事件结束(NavigationEnd)时，手动更新组件状态。的内嵌样式失效。"...在webstorm里，更改文件不能在浏览器中更新输出。原因：webstorm里面默认启用”safe write”，将保存先存到临时文件。...原因：angular(v4.1.1)中，使用ActivatedRoute的API获取路由信息。

8.1K0 0

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

(isDisabled: boolean): void; } writeValue：在初始化的时候将formControl的值传递给原生表单控件（即，将模型中的新值写入视图或 DOM 属性中）； registerOnChange...：用来获取原生表单控件的值更新时通知Angular表单控件更新的函数（即，设置当控件接收到 change 事件后，调用的函数） registerOnTouched：用来获取通知用户正在交互的函数（即，设置当控件接收到...(isDisabled: boolean)：设置DISABLED状态时做的执行的方法。即，当控件状态变成 DISABLED 或从 DISABLED 状态变化成 ENABLE 状态时，会调用该函数。...之后就可以在表单组件中可以直接引入了： ... 参考资料 Angular 4.x 自定义表单控件【荐】深入Angular自定义表单控件 Angular集成Editor.md的Markdown编辑器，支持NgModel

5.2K2 0

Angular 表单2--响应式表单, 处理异步数据

上一节中我们定义了一个响应式表单，其中表单数据是在定义的时候就初始化好的，但是很多时候数据需要异步获取，比如打开一个编辑页面，需要请求HTTP拿到数据。...根据数据修改表单中字段的值，最终体现在页面上。我们改造上一节的例子，成为异步获取数据。...我们先创建service文件, 写一个loadUser方法，模拟HTTP请求 import { Injectable } from '@angular/core'; import { of } from...about: [] }); this.user$ = this.userService.loadUser().pipe( // tap 返回的还是 Observable 这里我们不订阅...，我们在模板中使用 async pipe 和 if else 语句实现有条件的显示表单 tap(user => this.form.patchValue(user)) );

2.7K3 0

在前端中理解MVC服务之 Angular篇(完结)

介绍本文是该系列中的第三篇，旨在了解 MVC 体系结构如何创建前端应用程序。目的是了解如何构建前端应用程序。...在第三篇文章中，应用程序将使用 Angular 构建，该版本来自TypeScript 的第二个版本。因此，本文介绍应用程序从 TypeScript 到Angular的迁移。...角度允许我们忘记DOM，所以，让user.view.ts文件从我们的应用中消失。最后，在最后一篇文章中，我们将转换代码以将其与 Angular 框架集成。第 1 部分。...View 模型的直观表示，即用户所看到的部分 Controller - Model与View中的链接下图是我们的项目结构该文件将充当一个画布，使用元素动态构建整个应用程序。...('users', JSON.stringify(users)); } 此方法不会调用创建服务时绑定的函数，在 JavaScript 或 TypeScript 中开发时callback是必需的，因为

4.1K2 0

Angular: 最佳实践

注意我们是怎么在组件类上创建一个 statuses 字段，以便我们可以在模版中使用这个枚举。但是假如我们在多个组件中使用这个枚举呢？或者假如我们要在不同的组件使用其他枚举呢？我们需要不停创建这些字段？...小经验：当我们在带有子元素的 HTML 元素上编写 ngFor 指令时，请考虑将该元素分离为单独的组件，就像下面： <div *ngFor="let user...在模版中写 *ngIf=”someVariable === 1” 是可以的，其他很长的判断条件就不应该出现在模版中。...比如，你想在模版中为未正确填写表单控件添加 has-error 类（也就是说并非所有的校验都通过）。...如果我们有更多的表单控件，那么它会使得视图更加混乱，并且创建了很多重复的逻辑。

2.8K4 0

使用Angular8和百度地图api开发《旅游清单》

安装脚手架： npm install -g @angular/cli 复制代码创建工作空间和初始应用 ng new my-app 复制代码安装material UI npm install @angular...组件每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。...class Storage {} ``` 复制代码路由 Angular 的 Router 模块提供了一个服务，它可以让你定义在应用的各个不同状态和视图层次结构之间导航时要使用的路径。...百度地图api及跨域问题解决我们进入百度地图官网后，去控制台创建一个应用，此时会生成对应的应用ak，如下：本地调试时将referer写成*即可，但是我们用ng的http或者fetch去请求api接口时仍会出现跨域...添加旅游清单表单空间我们都用h5原生控件，我们使用angular提供的form模块，具体代码如下： import { Component, OnInit } from '@angular/core';

6K3 0

Angular 动态表单

开发过程中，表单是最常用处理数据的窗口。其出场率居高不下。每个表单都要去写HTML，CS, JS。还要验证。让本就枯燥繁琐的开发更显无趣。动态表单功能：不限布局。不限个数。...直接支持双向绑定（ngModel，formControlName） <a dynamic-form [options]="options" [(ngModel)]="formValue" [form]=...，生成FormGroup（有多个表单时（主表单+多子表单）只有主表单才生成FormGroup，子表单直接传options） image.png 支持自定义模板，支持排序（order）。...现有控件，只写了下拉框和文本框。根据实际需求。可以扩展更多控件。（本插件样式也是没写的。每个项目的样式都不一样，写了反而影响你们的项目。...所以不写） image.png 表单使用 image.png image.png 代码地址

3.2K4 0

Angular 结合 NG-ZORRO 快速开发

当然你也可以执行 npm install ng-zorro-antd 添加，不推荐。...思路：先添加页面 user 用户的列表页面，使用 ng-zorro 中 table 组件用户的新增和更改页面可以共用同一个页面，使用 ng-zorro 中 form 组件页面删除功能直接使用弹窗提示...，使用 ng-zorro 中 modal 组件对 ng-zorro 组件按需引入调整路由文件按照思路，我们得在 ng-zorro 引入： // app.module.ts import { ReactiveFormsModule...imports: [ // 是在 imports 中添加，而不是 declarations 中声明 NzTableModule, NzModalModule, NzButtonModule,...这两个功能是公用一个表单的～我们在 html 中添加: // user-info.component.html <form nz-form [formGroup]="validateForm" class

1.7K1 0

nz-select 数据回显失败，大模型救了我一命。

继《时隔5年重拾前端开发，却倒在了环境搭建上》之后，就一直在赶这个项目的进度。这次又又又又又是前端问题，再次分享给和我一样不懂Angular框架的程序员们。...option下拉框中是有可选项的，只不过设置的数据没有显示出来。...代码是这样的：字段1 this.validateForm.setValue({ namexxx: this.namexxx,});老铁们能看出哪里有问题不？...我将代码发给大模型后，给我的回答如下您的 nz-option 中使用了插值表达式 {{data.id}} 和 {{data.name}}，这在 Angular中通常是用于模板中显示动态数据的方式。

1671 0

Angular 从入坑到挖坑 - Router 路由使用入门指北

一、Overview Angular 入坑记录的笔记第五篇，因为一直在加班的缘故拖了有一个多月，主要是介绍在 Angular 中如何配置路由，完成重定向以及参数传递。...至于路由守卫、路由懒加载等“高级”特性，并不会在本篇文章中呈现对应官方文档地址：路由与导航配套代码地址：angular-practice/src/router-tutorial 二、Contents...Angular 从入坑到弃坑 - Angular 使用入门 Angular 从入坑到挖坑 - 组件食用指南 Angular 从入坑到挖坑 - 表单控件概览 Angular 从入坑到挖坑 - HTTP...Angular 项目中，系统的路由需要我们将一个 url 地址映射到一个展示的组件，因此需要手动的去设置 url 与组件之间的映射关系因为我们在使用 Angular CLI 创建项目时，选择了添加路由模组...4.2.2、动态路由传递与使用查询参数不同，使用动态路由进行参数传值时，需要我们在定义路由时就提供参数的占位符信息，例如在下面定义路由的代码里，对于组件所需的参数 newsId，我们需要在定义路由时就指明

4.2K5 0

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

这个Angular版本更加注重于开发移动应用程序，开发人员可以使用它创建跨平台的应用程序，在解决了移动应用程序（功能，加载时间等）的挑战后，Angular2可以更容易的处理桌面组件。...动态载入：这是之前的Angular版本均不具备的功能，Angular2包含了这个功能，即使在开发人员忙碌时，也能够添加新的指令或控件。模板：在Angular2中，模板编译过程是异步的。...设计：所有这些逻辑都是使用管道架构创建的，这使得将自己的操作添加到管道中或删除默认操作变得非常简单。此外，它的异步字符允许开发人员在管道中，实现对用户进行身份验证或加载控件信息的服务器请求。...动画包： Angular4的开发人员将动画从Angular的核心部分提取出来，并将它们放在独立的包中。这意味着如果开发人员不需要使用动画，就可以不创建这些额外的代码。...模板的源映射：每当模板中的某些内容出现错误时，都将创建源映射，为原始模板提供有意义的说明内容。结论：对于仍处于学习阶段的人来说，Angular会有点混乱。

8.7K2 0

纯前端控件集 WijmoJS 2018V2发布，在React、Vue和Angular中更易用

VSCode设计器：用于自定义Angular 框架下WijmoJS 组件 Web在线设计器，用于创建和自定义wijmoJS 控件 VSCode设计器此设计器是VSCode的扩展。...或者，还可以在VSCode的扩展管理器中搜索“wijmo”并从那里安装。在安装后重新加载VSCode。然后打开一个使用WijmoJS 控件的Angular应用程序并尝试启动设计器。...Web在线设计器此设计器是用于创建和自定义WijmoJS控件的Web应用程序。开发人员可以在任何浏览器中运行此设计器。它允许将控件添加到设计图面，然后根据自己的喜好自定义它们。...WijmoJS 在本次更新中为Vue V2支持增加了很多不错的功能。比如，WijmoJS 子组件现在可以在动态场景中正确工作，例如v-for和v-if指令。...例如，WjcFlexGrid组件类扩展了FlexGrid控件类。这也意味着当WijmoJS 用于“Web组件模式”时，基础WijmoJS 控件类扩展了HTML 元素类。

7K2 0

走进AngularJs(二) ng模板中常用指令的使用方式

通过使用模板，我们可以把model和controller中的数据组装起来呈现给浏览器，还可以通过数据绑定，实时更新视图，让我们的页面变成动态的。ng的模板真是让我爱不释手。...在ng表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了。...$injector服务进行依赖注入；　　6) 根据$injector服务创建$compile服务用于编译；　　7) $compile服务编译DOM中的指令、过滤器等；　　8) 使用ng-init指令...顺着这个思路再多想一点，我们在模板中使用{{}}显示数据时，在ng编译完成之前页面上岂不是会显示出大括号及里面的表达式？确实是这样。...因为我编写的是单页面应用，页面只会在加载index.html的时候出这个问题，只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的，就可以放心使用{{}}了。

2.9K2 0

如何选择前端框架：ANGULAR VS EMBER VS REACT

原生App支持使用Angular开发原生应用是2.0版本的最大改进，Agular团队与React联合，在Angular 2.0 中底层使用React Native渲染原生App，可实现新一代的混合App...Angular支持使用TypeScript语言（由微软提供的，为JavaScript提供类型检测等高级功能）。在实际开发中，很多开发人员还在使用TypeScript。...Angular很多方面的改进都期望能够使Angular成为众多企业开发首选的框架，使用2.0目前来看似乎有点冒险，但我相信Angular2.0时代即将到来。...Ember2.0 特点 Ember 2.0主要改进——移除了之前不建议开发的功能，旨在成为一个瘦身框架。在Ember 1.13上运行的程序，可以无缝切换到Ember 2.0上。...React1.0 是三个框架中最轻量级的框架，React在渲染UI控件方面做的非常好，经常与其他框架结对使用。然而更常见的情况就是与Flux 体系架构联合使用。

2.3K7 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云