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

在Angular2中,有没有一种方法可以在创建控件(或formControlName)之后将其添加到formGroup?

在Angular2中,可以使用addControl()方法将控件或formControlName添加到formGroup中。addControl()方法接受两个参数,第一个参数是要添加的控件或formControlName的名称,第二个参数是要添加的控件或formControlName的实例。

以下是一个示例代码:

代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-example',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="myControl">
    </form>
  `
})
export class ExampleComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({});
    this.addControlToForm('myControl');
  }

  addControlToForm(controlName: string) {
    const control = new FormControl();
    this.myForm.addControl(controlName, control);
  }
}

在上面的示例中,我们创建了一个FormGroup实例myForm,然后在ngOnInit()方法中调用addControlToForm()方法来添加控件myControlmyForm中。在模板中,我们使用formControlName指令将控件与表单关联起来。

请注意,上述示例中的代码仅用于演示目的,实际应用中可能需要根据具体需求进行适当的修改和扩展。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL版。您可以通过以下链接了解更多信息:

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

相关·内容

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

,从而生成错误信息列表 进行用户输入数据有效性验证时,控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板获取到指定控件的状态信息,之后可以通过获取错误信息列表来进行反馈 <div...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过组件构造 FormGroup 实例来完成对于多个表单控件的统一管理 使用 FormGroup 时,同样组件定义一个属性用来承载控件组实例...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件的 getter 方法,从而在模板通过此方法来获取到指定控件的状态信息 import { Component, OnInit...4.4、表单的自定义数据验证 4.4.1、自定义验证器 很多的情况下,原生的验证规则无法满足我们的需要,此时需要创建自定义的验证器来实现 对于响应式表单,我们可以定义一个方法,对控件的数据进行校验,之后方法作为参数添加到控件定义处即可...g directive direactives/hero-validate 创建完成指令之后,我们需要将这个指令将该验证器添加到已经存在的验证器集合,同时为了使这个指令可以与 angular 表单集成在一起

18.9K20

Angular系列教程-第四节

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

2.8K50

当nz-checkbox-group多选框组遇上必选校验

当nz-checkbox-group多选框组遇上必选校验 Angular2 ng-zorro-antd checkbox 今天表单中用到ng-zorro-antd组件的多选框nz-checkbox-group...Validators.required]], }) } getFormControl(name) { return this.validateForm.controls[name]; } 为了找问题,提交方法...继续探索,看到getFormControl('one').hasError('required'),既然有has,有没有set一类的?...nzValidateStatus 会自动从 NgControl 获取数据,也可以手动指定特定的 NgControl组件将表单校>验函数的校验过程和异步返回的结果显示对应的error | validating...于是有了如下的终极解决方案: 问题.html不用做修改。 问题.ts修改如下: //因为不想在提交方法_submitForm()再循环一遍获取多选结果,就只好在这先定义一个临时的用于存储选择结果。

4.3K20

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

这样的一种合并方式 Rx 中专门有一个操作符来处理,那就是 combineLatest。...Angular 处理响应式表单只有 3 个步骤: 1、组件的 HTML 模版给要处理的控件加上 formControlName="blablabla" 2、form 标签添加 [formGroup...]="xxx" 指令,这个 xxx 就是你组件声明的 FormGroup 类型的成员变量:比如下面代码的 form: FormGroup; 3、组件的构造函数取得 FormBuilder 后(...这两个数据流其实是来自于两个控件的值的变化,而响应式表单获取值的变化是非常简单的就一行: 上面这行代码的意思是从表单的控件数组取得 formControlName 为 age 的这个控件然后监听其值的变化...所幸的是,Angular 提供了对于响应式编程非常友好的设计,我们完全可以不在代码做订阅取消订阅的动作。那么问题来了,不订阅的话,值怎么获得呢?答案是 Async 管道。

5.2K10

Angular: 最佳实践

应用程序的 tsconfig.json 文件,我们可以设置这个标志,告诉编辑器未明确类型时候抛出错误。否则,编辑器坚定它无法推断变量的类型,而认为是 any 类型。...注意我们是怎么组件类上创建一个 statuses 字段,以便我们可以模版中使用这个枚举。但是假如我们多个组件中使用这个枚举呢?或者假如我们要在不同的组件使用其他枚举呢?我们需要不停创建这些字段?...模版写 *ngIf=”someVariable === 1” 是可以的,其他很长的判断条件就不应该出现在模版。...比如,你想在模版为未正确填写表单控件添加 has-error 类(也就是说并非所有的校验都通过)。...如果我们有更多的表单控件,那么它会使得视图更加混乱,并且创建了很多重复的逻辑。

2.8K40

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

接下来一起了解Angular2这个版本发布的原因以及如何将其添加到Web开发。 ...这个Angular版本更加注重于开发移动应用程序,开发人员可以使用它创建跨平台的应用程序,解决了移动应用程序(功能,加载时间等)的挑战后,Angular2可以更容易的处理桌面组件。...通过DI库中提供基本信息(可以调用函数创建类的实例来检查相关元数据),从而简化了对象实例的构建。通过提供注入注释,使得参数信息重写也变得简单。...动态载入: 这是之前的Angular版本均不具备的功能,Angular2包含了这个功能,即使开发人员忙碌时,也能够添加新的指令控件。 模板: Angular2,模板编译过程是异步的。...设计: 所有这些逻辑都是使用管道架构创建的,这使得将自己的操作添加到管道删除默认操作变得非常简单。此外,它的异步字符允许开发人员管道,实现对用户进行身份验证加载控件信息的服务器请求。

8.7K20

(数据科学学习手札113)Python+Dash快速web应用开发——表单控件篇(下)

的Form()与FormGroup()被设计用于更快捷地排布我们的表单控件,使用逻辑是先用FormGroup()组织好每一个表单控件,再将若干个FormGroup()形成的列表作为Form()的children...,在上面例子的网页表单,共包含了两个输入框和一个按钮共三个控件,通过将控件组织FormGroup()+Form()的结构,使得这些控件布局上自成一体非常方便。   ...相信你也注意到我们有些FormGroup()除了控件自身,还添置了一些额外的辅助性质的部件,常用的有: dbc.Label()   利用dbc.Label()部件,我们可以在对应控件之前添加说明文字,...利用html_for参数可为其绑定具有某个id的控件,利用color参数可以快捷修改其颜色; dbc.FormText()   利用dbc.FormText()可以表单控件之后为其添加格式美观的说明文字...参数,只不过这里我们同一个FormGroup()为指定表单控件添置valid参数相反的两种预设的FormFeedback()内容部件,接着只需要写个回调关联控件自身即可: app2.py import

1.1K20

炫酷!纯Python开发LOL英雄信息查询平台

的Form()与FormGroup()被设计用于更快捷地排布我们的表单控件,使用逻辑是先用FormGroup()组织好每一个表单控件,再将若干个FormGroup()形成的列表作为Form()的children...,在上面例子的网页表单,共包含了两个输入框和一个按钮共三个控件,通过将控件组织FormGroup()+Form()的结构,使得这些控件布局上自成一体非常方便。...相信你也注意到我们有些FormGroup()除了控件自身,还添置了一些额外的辅助性质的部件,常用的有: 「dbc.Label()」 利用dbc.Label()部件,我们可以在对应控件之前添加说明文字,...利用html_for参数可为其绑定具有某个id的控件,利用color参数可以快捷修改其颜色; 「dbc.FormText()」 利用dbc.FormText()可以表单控件之后为其添加格式美观的说明文字...参数,只不过这里我们同一个FormGroup()为指定表单控件添置valid参数相反的两种预设的FormFeedback()内容部件,接着只需要写个回调关联控件自身即可: ❝app2.py ❞ import

98820

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

角度允许我们忘记DOM,所以,让user.view.ts文件从我们的应用消失。最后,最后一篇文章,我们将转换代码以将其与 Angular 框架集成。 第 1 部分。...在此特定情况下,我们将使用数组来存储所有用户,并生成与读取、修改、创建和删除 (CRUD) 用户关联的四种方法。..._commit(this.users); } 这个负责存储Localstarage方法仍然有待定义: _commit(users: User[]) { localStorage.setItem...('users', JSON.stringify(users)); } 此方法不会调用创建服务时绑定的函数, JavaScript TypeScript 开发时callback是必需的,因为...下面是为此示例创建的模板(一个角度丰富的 HTML 版本): Users <form [formGroup]="userForm" (ngSubmit)="add(userForm.value

4.1K20

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

WijmoJS VSCode Designer还提供了一个独立的命令,可以单独的选项卡打开设计图面,您可以在其中使用示例数据实例化控件,自定义其属性,并生成可以复制到源文件的Angular标记。...如果您已经下载了WijmoJS,则可以Samples \ TS \ Angular2 \ HeaderFilters \ HeaderFilters文件夹中找到此项目。...例如,您可以通过添加适当类型的新系列元素,轻松地将趋势线添加到图表“属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。...随着趋势线添加到图表,设计界面现在看起来像这样: 独立模式下,没有要更新的源文件,但您仍然可以生成Angular标记并将它们从设计器复制到HTML源。...在这种情况下,设计器以斜体显示只读文本框的绑定。 保存操作期间保留绑定事件; 但是,设计器没有用于创建编辑它们的界面。

5.4K40

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

ngAfterViewInit:Angular创建组件的视图后。 ngAfterViewChecked:Angular检查组件视图的绑定之后。 2. ...Angular2,组件中发生的任何改变总是从当前组件传播到其所有子组件。如果一个子组件的更改需要反映到其父组件的层次结构,我们可以通过使用事件发射器api来发出事件。...这通常用在setter,当类的值被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...对于这些情况,我们可以通过创建我们自己的“ .d.ts”文件来实现定义扩展类型。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

17.3K80

前端代码常见的 Provider 究竟是什么

不知道你有没有在某处见过 xxProvider,Provider 并不是 23 种经典设计模式之一,但是却应用特别多,可以算是一种比较新的模式。...context 的 Provider react 组件树可以父组件放一些数据到 context ,然后子组件取出来用,也是通过 provider 的方式。...Angular2 的 providers angular 最大的特点就是实现了 ioc,也就是容器内的对象,可以声明依赖对象,然后用到的时候会自动注入。...总结 provider 是一种创建对象的模式,但是和工厂不同,它是有不同的创建策略的,算是一种复合模式,工厂只是其中一种策略,这种模式 Angular 的 ioc 创建对象的时候、VSCode 插件注册各种处理函数的时候都有大量应用...大家还有没有别的地方见过 Provider 呢?可以留言交流哦~

93710

前端代码常见的 Provider 究竟是什么

不知道你有没有在某处见过 xxProvider,Provider 并不是 23 种经典设计模式之一,但是却应用特别多,可以算是一种比较新的模式。...context 的 Provider react 组件树可以父组件放一些数据到 context ,然后子组件取出来用,也是通过 provider 的方式。...Angular2 的 providers angular 最大的特点就是实现了 ioc,也就是容器内的对象,可以声明依赖对象,然后用到的时候会自动注入。...总结 provider 是一种创建对象的模式,但是和工厂不同,它是有不同的创建策略的,算是一种复合模式,工厂只是其中一种策略,这种模式 Angular 的 ioc 创建对象的时候、VSCode 插件注册各种处理函数的时候都有大量应用...大家还有没有别的地方见过 Provider 呢?可以留言交流哦~

1.4K30

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

的目录,它已经是一个可运行的reactjs项目,我们在此基础上通过修改添加若干文件,就可以完成相应的React应用开发,避免大量繁琐的配置工作。...文本框中键入Monkey 代码,点击下面按钮,我们就可以开始编译原理算法的第一步:词法解析,这是我们后续章节要详细讲解的内容。回过头来,我们先解析一下刚完成的组件代码。...React出现之处,组件的创建方法是通过调用React.createClass来创建组件,现在网上一些书籍对React的讲解还是基于这种办法,我们必须意识到,这种办法是过时的办法。...这两种方式的差异显示出React框架在开发方法论上的显著进化,我们现在使用的是类似于java那样面向对象的开发方式,而React.createClass这种创建组件的方式其实是类似于C语言那样的,面向过程的开发方式...我们看到,render函数,我们还定义了一个textAreaStyle的对象,不难看出,它实际上承担了原来CSS的作用,也就是说,JSX,我们可以统一用javascript语言来代替原来需要用HTML

4.6K20

Excel编程周末速成班第21课:一个用户窗体示例

1.将文本框控件添加到窗体,然后将其Name属性更改为txtFirstName。 2.该文本框旁边添加一个标签控件,并将其Caption属性更改为“名字:”。...如你第20课中所学习的,此事件接收一个参数,该参数标识所按下的键。如果该键可以接受,则将其传递;否则取消。 VBA联机帮助的KeyCode值列表,你可以看到键0到9的代码值为48到57。...当然,单击“下一步”按钮时,这是必需的,单击“取消”“完成”按钮时,这也是必需的。即使使用Hide方法隐藏了该窗体,它在下次显示时仍将所有数据保留在其控件。因此,需要清除控件。...你知道第一列标题位于单元格A2。这意味着第一行空白开始于单元格A3它下面的任何单元格。有几种方法可以识别第一个空行。这里使用其中的一种,如下: 1.从单元格A2开始作为参考点。...开始编程之前计划项目总是一个好主意。 数据验证是任何数据输入程序的重要组成部分。 可以输入数据之后输入数据时执行数据验证。 当你的代码将在程序的多个位置中使用时,将其放在单独的过程

6K10

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

曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但还是希望能做成组件形式的,之后看到一篇自定义组件的文章...(isDisabled: boolean): void; } writeValue:初始化的时候将formControl的值传递给原生表单控件(即,将模型的新值写入视图 DOM 属性); registerOnChange...(isDisabled: boolean):设置DISABLED状态时做的执行的方法。即,当控件状态变成 DISABLED 从 DISABLED 状态变化成 ENABLE 状态时,会调用该函数。...里面确实能看到一些似曾相识的方法,但个人能力有限,无法完全看懂,也就只能到这里了,喜欢深入探究的可以自行探索。...之后可以表单组件可以直接引入了:

5.2K20

一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

它还监视项目源的每个更改并重新编译所有更改,之后它会要求浏览器重新加载打开的页面。因此,通过使用Angular CLI,我们已经开发环境工作,无需编写配置实际执行任何操作。...但在基本层面上,请考虑如下这些方法创建组件之后立即调用构造函数,传递给它的数据准备好并填充之前很久才调用该构造函数,而ngOnInit仅在第一个更改周期数据,因此您可以访问组件输入。...之后,我们可以调用我们的addCard方法方法,我们onCardAdd从我们的卡片中输出Angular 文本,并将卡片文本重置为空字符串,以便用户可以继续添加新卡片而无需编辑旧卡片的文本。...我们讨论了State它的不变性,这意味着我们创建之后不能改变它的任何属性。这使得我们的应用程序状态存储我们的系统几乎不可能State。...您刚刚创建了第一个Angular应用,将Firebase用作后端,并通过Nginx将其投放到Docker容器。 就像任何新的框架一样,要做到这一点,唯一的方法就是继续练习。

42.5K10
领券