如何在FormGroup中动态生成FormControls？
在FormGroup中动态生成FormControls可以通过以下步骤实现：
- 导入相关模块和依赖：
首先，确保你的开发环境中已经安装了必要的Angular依赖，包括
@angular/forms模块。 - 创建FormGroup实例：
在组件中，首先导入
FormBuilder类，并在构造函数中实例化一个FormBuilder对象。然后，使用FormBuilder的group()方法创建一个FormGroup实例。 - 创建FormGroup实例：
在组件中，首先导入
FormBuilder类，并在构造函数中实例化一个FormBuilder对象。然后，使用FormBuilder的group()方法创建一个FormGroup实例。 - 动态生成FormControls：
在需要动态生成FormControls的地方，使用
addControl()方法来添加新的FormControls。你可以使用FormBuilder的control()方法创建一个FormControl实例，并通过FormGroup的addControl()方法添加到FormGroup中。 - 动态生成FormControls：
在需要动态生成FormControls的地方，使用
addControl()方法来添加新的FormControls。你可以使用FormBuilder的control()方法创建一个FormControl实例，并通过FormGroup的addControl()方法添加到FormGroup中。 - 你可以在需要动态生成FormControls的地方调用上述代码块。可以根据需要多次调用
addControl()方法来添加不同的FormControl。 - 表单绑定和渲染：
最后，你可以在模板中使用
formGroup和FormControl的名称来进行表单绑定和渲染。例如，使用formControlName指令将FormControl与对应的表单字段绑定起来。 - 表单绑定和渲染：
最后，你可以在模板中使用
formGroup和FormControl的名称来进行表单绑定和渲染。例如，使用formControlName指令将FormControl与对应的表单字段绑定起来。 - 请注意，
fieldName应该与在组件中动态生成FormControl时使用的名称保持一致。
这样，你就可以通过动态生成FormControls来扩展和管理表单中的字段了。
在腾讯云的生态系统中，可以使用Tencent Cloud Base（腾讯云开发平台）来快速搭建应用程序并管理云端资源。它提供了一系列工具和服务，如云函数、云数据库、云存储等，用于实现前后端开发、服务器运维、存储等功能。你可以通过以下链接了解更多关于Tencent Cloud Base的信息：Tencent Cloud Base介绍
请注意，以上答案仅供参考，实际实现可能会因具体的开发环境、需求和技术栈而有所不同。
相关·内容
我正在研究角表单数据驱动的方法，我将表单控件动态地添加到FormArray中，我使用form.reset()来重置添加的控件，但是form.reset()并没有重置FormArray长度，我发现这是一个已知的问题，可以用这种方法解决，，但我仍然不清楚这一点。请帮忙，谢谢
reviewForm: FormGroup;
ngOnInit(){
this.reviewForm = new FormGroup({
'controlArray': new FormArray([
])
});
}
onS
浏览 5提问于2017-11-21得票数 7
回答已采纳
我正在创建嵌套组件。有了多个formGroups，我想动态地绑定它们。例如。
组件中的forGroup类似于
formGroup : {
controls:{
firstName: FormControl,
lastName: FormControl,
userName: FormControl,
Password: FormControl
}
}
HTML类似于&它用于多个控件。
<div [formGroup]='formGroup'>
<div class=&
浏览 2提问于2017-02-16得票数 7
回答已采纳
1回答
我将创建一个可以动态添加输入的表单。
我在角2中找到了一个关于相同问题的，但我无法使它在我的示例中工作
下面是我的组件ts文件：
export class AjoutProjetComponent implements OnInit {
isLinear = false;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;
constructor(private _formBuilder: FormBuilder) {}
ngOnInit() {
this.secondForm
浏览 3提问于2017-11-21得票数 0
回答已采纳
我有一个角度应用程序，它有一个动态生成的问卷表，其中有X个主题，用户必须回答有关的问题。让这个问题变得棘手的是，行对应于问题，列对应于答案(这是我无法更改的任务)，因此我无法将生成的行封装在一个表单组中，该组完全负责每个独立主题的答案。HTML看起来像：
<tr *ngFor="let question of questions; index as i">
<td class="question-column">{{ question }}</td>
<td *ngFor="let n
浏览 2提问于2020-08-01得票数 1
回答已采纳
我有一个角度反应形式，我是这样动态地构建的：
this.reportForm = this.fb.group({
dwellingValues: this.fb.group({
design: [this.report.design],
foundation: [this.report.foundation],
age: [this.report.age],
}),
});
如何向dwellingValues formGroup添加控件？
我试过：
this.reportForm.addControl('dwellingVal
浏览 0提问于2019-08-16得票数 0
回答已采纳
2回答
我有从API获取数据的动态复选框，下面是html文件
<form [formGroup]="form" (ngSubmit)="submit()">
<label formArrayName="summons" *ngFor="let order of form.controls.summons.controls; let i = index">
<input type="checkbox" [formControlName]="i">
{{s
浏览 0提问于2019-08-06得票数 1
如何在FormControl中的数组中为字符串添加最大长度？
以下设置了元素数的验证器，而不是数组中元素可能具有的字符数：
let formGroup: FormGroup = new FormGroup({
tags: new FormControl([], [Validators.maxLength(32)]),
})；
浏览 1提问于2020-11-13得票数 0
回答已采纳
当设置FormControl的默认值时，我得到了一个错误，但它返回了如下错误：
error TS2322:输入'AbstractControl‘不可指定为’AbstractControl‘
这是我的.ts文件：
profileForm = new FormGroup({
username : new FormControl().setValue("a"),
firstname : new FormControl().setValue("a"),
lastname : new FormControl().set
浏览 0提问于2020-02-18得票数 1
回答已采纳
如何在函数Observable<boolean> after this.Form = new FormGroup(formControls);中返回GetDataFromService()
<form *ngIf="loading | async" [formGroup]="Form" class="example-form">
</form>
<mat-spinner *ngIf="!loading | async"></mat-spinner>
TS
import
浏览 7提问于2019-10-12得票数 0
回答已采纳
在服务中，我使用此函数接收来自firebase数据库的所有记录。 treatmentsRef: AngularFireList<any>;
treatments$: Observable<any[]>;
receiveTreatment(){
this.treatmentsRef = this.db.list('/treatments');
this.treatments$ = this.treatmentsRef.valueChanges();
return this.treatments$;
} 接下来，我在组件中调用
浏览 6提问于2019-05-09得票数 0
回答已采纳
我有表单字段，需要添加更多不同的字段，当用户单击 add button.If用户单击Add按钮时，新表单将在一个模式窗口中打开，他可以在其中配置字段的名称、类型和值)。如何将新创建的动态元素添加到现有表单中。
我尝试使用以下代码，但没有添加新生成的字段。
issuer.html
<dynamic-form [dataObject]="person"></dynamic-form>
<button type="submit" class="btn btn-info" (click)="addbtn();
浏览 0提问于2018-06-26得票数 0
2回答
我正在使用以下数据对象创建复选框列表：
data = [
{ Key: "class_id", displayName: "Section ID", enabled: true },
{ Key: "room_l4", displayName: "Location", enabled: false },
{ Key: "section", displayName: "Section", enabled: true },
{ Key: "section_2", displayN
浏览 6提问于2020-03-20得票数 1
我有一个像这样分配的FormGroup：
this.homeForm = new FormGroup({
bicos: new FormArray([],HomeInputValidator.isValid)
});
所有的FormControl都添加到FormArray中，如下所示：
addForm(){
(<FormArray>this.homeForm.controls['bicos'])
.push(new FormControl(null));
}
据我所知，验证器负责整个FormArray，即当一个FormControl无效时，它会触发所有其他FormC
浏览 0提问于2018-02-21得票数 0
回答已采纳
1回答
我正在根据另一个输入的值创建一些输入，我的问题是我不知道如何获得生成的这些新输入的值。
这是我的观点部分：
<div class="input-group">
<div class="input-group-append">
<button class="btn btn-secondary" (click)="minusInv()" type="button">
<i class="fa fa-minus"&g
浏览 4提问于2022-03-03得票数 2
回答已采纳
我的初始FormGroup包含一些FormControls和一个FormArray，它们应该动态地填充FormGroups
myForm: formBuilder.group({
....
noOfSomething: ['', Validators.required],
something: this.formBuilder.array([])
}),
我可以通过addButton在表单数组中创建一个FormGroup，并通过一个remove按钮删除它。
但我的要求是当"noOfSomething“(这是一个数字)的值发生变化时，而
浏览 0提问于2018-03-20得票数 1
1回答
发送带有嵌套列表的对象
、、、、
我正在编写一个when应用程序，该应用程序使用角从用户获取两个数组和一个矩阵，然后将它们发送到java，然后进行一些计算，我在这个when应用程序中使用FormGroup，最后当用户向服务器发送数据时，FormGroup值如下所示：
object {
targetFunctionValues= [1,2,3,4,5],
constraintsValues= [[1,2,3,4],[1,2,3,4]],
resultValues=[1,2,3,4]
}
我使用FormGroup表示"object“，使用FormArray表示"list1”、"matrix1“、"l
浏览 1提问于2022-08-19得票数 0
回答已采纳
我有这个表单项目，它有表单控件，应该有表单数组。我已经做了所有的准备，但是我的选项列表却是空的。而且，我不知道如何根据之前的选择预先流行其他两个选择。(在我的脑海中，它看起来像美国(由用户选择) -> Other select原来是美国各州的列表。碰巧用户选择了一些其他选项，如印度->列表中的印度邦在另一个选择)。
请帮助我实现此功能。我自己想不出来，似乎也找不到合适的例子。
我的代码是：
模板：
<h2>Basic Details</h2>
<form class="form" [formGroup]="signUpF
浏览 17提问于2019-11-04得票数 0
1回答
我已经编写了我自己的验证器来检查我的反应性表单的输入字段，但是它们似乎不起作用。前两个错误永远不会产生错误，而最后一个错误一旦我将其添加到代码中，就会破坏所有内容。我一直在尽我所能地进行调试，我发现在我的validatePasswords中，他立即跳入了这个方法，而我甚至没有碰过任何东西。如果你们中的任何人能够弄清楚为什么会这样做，或者为什么我的其他验证程序永远不会产生错误，那就太棒了！
我的3个自定义验证器
function validateEmail(control: FormGroup): { [key: string]: any } {
var mailReg = /^([a-zA
浏览 1提问于2019-04-07得票数 1
回答已采纳
1回答
我有一组反应性表单，我将其设置为一组反应性表单：
typesForms: FormGroup[] = [];
我在html中循环了一下：
<form *ngFor="let type of typesForms; let i = index" [formGroup]="typesForms[i]" class="row">
然而，当我推送一个新表单时，HTML不会更新。
this.typesForms.push(this.formBuilder.group({
type: { value: data['type'
浏览 2提问于2017-06-04得票数 3
我从angular开始，我不知道如何从我的表中恢复输入单元格的数据。知道每一行都是动态添加的。我应该在数组中使用双向数据绑定还是使用formGroup类？ 这是我的dashboard.component.html： <!--Dashboard-->
<section class="section_4">
<form ng-submit="addRow()">
<div class="col text-center">
<table class=
浏览 8提问于2019-09-04得票数 0
回答已采纳
1回答
我是个身材矮小的新手，一下子就被困住了。我想让JSON的表单提交。该表单是动态下拉和动态mat数据报童的自定义组合。我无法验证或获得提交的数据。这是我的组件.ts和html文件的代码
import { Component, OnInit, Input } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
var R_DATA = {
"grid": {
"row": {
浏览 2提问于2021-04-16得票数 0
我希望你能教我FormGroup中"a"，"b"，"c“FormControls的区别。
this.form = this.fb.group({
a: [{ value: this.a }],
b: [this.b],
c: new FormControl({ value: this.c }),
});
浏览 0提问于2018-11-21得票数 1
我有自定义组件，它连接到控件值访问器。在这个组件中，我动态地构建表单标记，如输入、文本区域等.
它可以正常工作--但是当我试图发送嵌套表单组时，我遇到了问题。所以表单组在表单组中。
我建造了这个formGroup
registerFG = this.builder.group({
password_register: ['', [Validators.required]],
email_register_group: this.builder.group({
email_register: ['', [Validators.re
浏览 1提问于2021-04-23得票数 1
我有一个场景，我想在子组件中添加新的FormControls到FormGroup实例中，同时更新父FormGroup实例。
浏览 2提问于2021-03-02得票数 0
我有一个现有的表单组，其中添加了另一个表单组。如何在表单标签中附加第二组的formControls？
这就是我在里面的样子。打字本档案：
function one() {
this.address = new FormGroup({
country1: new FormControl(null, [Validators.required]),
pincode1: new FormControl(null, [Validators.required])
})
}
function two() {
this.address.addControl(&#
浏览 2提问于2022-05-30得票数 0
回答已采纳
这在某种程度上是对的欺骗，但希望不那么复杂。
是否可以通过表单输入添加一个全新的FormGroup，其中可以通过输入定义新的FormGroupName？如果是这样的话，我将使用哪些指令或函数来实现这一点？
用例：
用户可以通过输入字段定义一个新的FormGroupName，然后单击以使用新的FormGroup扩展表单，然后为该FormGroup的FormControls填写值。
1用户正常填写现有的“名称”字段。
在输入字段中键入“foo”
单击“添加数据组”3次，以创建新的FormGroup 'foo‘
4表单显示新FormGroup foo的“高度”和“权重”的输入字段。
5用户填
浏览 3提问于2016-08-25得票数 2
回答已采纳
1回答
我是个初出茅庐的新手。
下面是我面临一些问题的表单的html标记
<form [formGroup]="detailsForm">
<div class="row parent-row" *ngFor="let row of formData;">
<input class="input-lg parent-input-primary" placeholder="{{row.first }} formControlName ={{row.first}}" /&g
浏览 1提问于2018-09-14得票数 1
回答已采纳
我有如下一系列数据：
[
{
id: "1",
name: "task1",
taskForms: [
{
id: "8782",
name: "ProcedureComment",
sortOrder: null,
description: "Comment for 'Procedure end / Suture' task",
label
浏览 11提问于2022-06-01得票数 1
我有一个包含嵌套模板(子窗体)的表单。所有内容都会呈现，但只有父窗体中的输入才有效。子模板/表单中的所有输入都是ng-invalid。因为它们是无效的，所以输入中的占位符没有显示，而是一个难看的[object Object]显示了占位符应该在哪里。
在其他尝试中：
为了隔离问题，我完全取消了嵌套表单中的验证，在这种情况下，子模板中的输入确实会变成ng-valid，并且它们的占位符会正确呈现(但请注意，容器<app-sub-enroll-form>仍然是ng-invalid)。因为取消验证解决了inputs的ng-invalid问题，所以这表明问题出在验证过程中的某个地方，但我看不出
浏览 1提问于2019-03-24得票数 0
我在angular的form中创建了一个formArray。 当我修补具有值为数组的tasks的对象时，此属性似乎被忽略且未设置。 不出所料，名字被更改了。但任务并非如此。为什么？ 我不想捕获特定的元素并使用setValue或类似的东西，我只想有一个对象，angular将调查这个对象并匹配值和字段。 The code in stackblitz.com import { Component, VERSION } from "@angular/core";
import { FormGroup, FormControl, FormArray } from "@angul
浏览 24提问于2020-10-12得票数 0
回答已采纳
我在我的FormArray中使用了一个自定义验证器，只要FormArray的输入是[]，验证器就能正常工作。但是，如果我向FormArray提供一个string[]或FormControl[]，验证器将破坏整个角应用程序，并导致无限的循环错误。
我真的不知道是什么导致了这一切。我需要能够用元素实例化FormArray，所以我需要这样做。
起初，我认为问题是由我将string[]传递给FormArray而不是FormControl[]造成的，但是即使在将数组映射到FormControls数组之后，我也会遇到同样的问题。
this.alertData.alertContacts只是一个电子邮件字符
浏览 0提问于2020-08-26得票数 0
回答已采纳
嗨，我已经创建了包含FormControls的FormGroup。我把它绑定到模板上，它工作得很好。现在我想给用户的功能，以创建另一个相同的形式意味着一个按钮点击FormGroup[]。每点击一次按钮，FormGroup[]的大小就会不断增加。多个表单也将开始显示。每个FormGroup都应该代表一个表单。
浏览 3提问于2017-06-09得票数 0
我在一个8角的项目中使用了materializecss 1.0.0，我遇到了一个问题。
我在其中创建了一个带有数据报警器和formselect的角反应表单，但是formGroup中的“valueChanges”变量只有在formselect更新其值时才会触发，但是数据报考器值仍然相同。
重要的1:我知道有一个叫做angular2-物化的包，但是它只在0.100版本上起作用。
重要的2:我尝试使用物化-css没有JQuery，因为它现在是一个可选的包。
form-request-card.component.html (部分)
[...]
<form [formGroup]=&
浏览 3提问于2020-01-07得票数 0
我有一个简单的表单与复选框在角度，我想让复选框检查自己，如果用户有这个角色。 这是我尝试过的： <form [formGroup]="rolesForm">
<label
formArrayName="roles"
*ngFor="let role of rolesForm.controls['roles'].controls; let i = index"
>
<input
type="checkbox"
[check
浏览 18提问于2019-10-16得票数 0
回答已采纳
1回答
我想为我的角度项目添加一些表单验证。遗憾的是，在执行ng serve时，我遇到了以下错误：
错误错误:无法在FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4970)的setUpControl (forms.js:2000)的FormControlName.push../node_ setUpControl(forms.js:4970)的FormControlName.Push../node_setUpControl(for
浏览 0提问于2018-12-05得票数 0
回答已采纳
1回答
this.formgroup = formbuilder.group({
os: [null, [Validators.required]],
});
const osType= ['Android', 'Ios'] 我试过了 this.formgroup.controls.os.setValue(osType) 结果 os: ['Android', 'Ios'] 预期结果 os: 'Android'
os: 'Ios' 我需要使用formdata发送数据。我尝试过使用setValu
浏览 29提问于2020-10-15得票数 0
我有一个表单组来管理一天中的时间，如下所示： time: new FormGroup({
date: new FormControl(new Date()),
startTime: new FormControl(null),
startTimeMeridian: new FormControl(MERIDIAN.PM),
stopTime: new FormControl(null),
stopTimeMeridian: new FormControl(MERIDIAN.PM)
}, [
浏览 49提问于2021-01-10得票数 1
1回答
我有多个复选框作为FormArray。当页面加载时，我想禁用所有这些复选框。
我尝试了下面提到的方式，但没有成功。
有人能解释一下这件事吗？
.ts文件
public myForm: FormGroup = new FormGroup({
name: new FormControl('', Validators.required),
specialized: new FormArray([]),
});
ngOnInit(): void {
this.companyForm.controls['specialized'].dis
浏览 2提问于2022-04-27得票数 0
回答已采纳
我使用的是反应性表单验证(模型驱动验证)，但不能在下拉更改时将值设置为form对象。
这是我的Formgroup
studentModel:StudenModel
AMform: FormGroup;
Name = new FormControl("", Validators.required);
Address = new FormControl("", Validators.maxLength(16));
constructor(fb: FormBuilder){
this.AMform = fb.group({
"Name&
浏览 5提问于2016-10-17得票数 9
回答已采纳
2回答
我正在尝试创建一个非常通用的\，它可以为一个form组使用一个自定义验证函数(用于比较2个日期)。该函数实际上可以是任何类型为ValidatorFn的验证函数：
export interface ValidatorFn {
(control: AbstractControl): ValidationErrors | null;
}
以下是根本问题：
我在一种配置文件中定义函数，并使用它输入反应性表单(接收函数作为参数)，并使用formGroup设置validationFn。以下是功能：
customValidationFunction : ValidatorFn = (group : Form
浏览 0提问于2019-04-30得票数 0
回答已采纳
我正在尝试遍历模板中的FormGroup of FormControls。我想为每个人显示一个复选框。这就是我的component.ts的样子
tags = ["vegan","vegetarian","meat","fruit","vegetable","seafood","fish","nut"];
get tagsForForm() {
return this.foodForm.get('tags') as FormGroup;
}
浏览 0提问于2020-05-21得票数 0
回答已采纳
我有一个角分量，对应一个表单/页面，它生成一个不确定数量的子组件，每个子组件代表一个单独的字段，我希望父组件的FormGroup验证子组件中包含的字段。只有当我这样做时，我才会得到一个错误：
FormControlName必须有相应的FormGroup。
下面是我的父组件的模板代码：
<div class="form-group" [formGroup]="parentGroup">
<table>
<tbody>
<tr *ngFor="let i of array"&g
浏览 0提问于2016-11-18得票数 4
在这种情况下，我必须将数据传递给服务器，就像下面的[1, 2, 454, 5456]
以及FormGroup的formArray中的数据
我尝试创建一个空数组，然后将空formControl推送到该数组，但这不起作用
this._fb.group({
content: this._fb.group({
question: [null, Validators.required],
media: [null, Validators.required],
options: this._fb.array([new FormContro
浏览 18提问于2019-10-24得票数 3
使用Angular 2，我有一个名为"example“的参数，它是一个Date对象。在模板中，我想用日期管道格式化"example“。如下所示：
<input type="text" [value]="example | date:'shortTime'">
// 9:00 AM
但是，我需要使用Angular的反应形式。FormControls优先，所以formControlName将覆盖value指令中的任何内容。
<input type="text" formControlName=
浏览 2提问于2017-03-09得票数 6
4回答
在我的父组件中，我有一个带有FormGroup的FormArray，我想在子组件中处理这个数组。父的HTML执行以下操作：
<ng-container [formGroup]="formGroup">
<app-child formArrayName="theArrayName">
我假设在孩子体内注入NgControl，然后可以访问：
@Component({
...,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: fo
浏览 16提问于2022-08-15得票数 0
我已经创建了一个从用户获取数据的简单表单，只有当输入字段中有数据时，我才想激活submit按钮。这是我的代码：
HTML：
`合同号。
<mat-form-field>
<mat-label>Instance No.</mat-label>
<input matInput id="instanceno" placeholder="" name="instanceno" formControlName="instanceno">
</mat-form-field&
浏览 2提问于2020-03-16得票数 1
回答已采纳
我有一个FormGroup，其中初始数据可能是空的，也可能不是空的。如果为null，则FormGroup的构建方式如下：
this.dataForm = this.formBuilder.group({
prop1: true,
testGroup: this.formBuilder.group({
data: null,
check: { a: "a", b: "b"}
})
});
如果它不是null，它的构建方式如下：
this.dataForm = this.formBuilder.group({
浏览 0提问于2019-01-22得票数 0
回答已采纳
由于某种原因，当我在生产中构建我的角项目时，有很多事情会中断，这些项目在dev中工作得很好。它们几乎是一样的，所以我将用一个例子来说明。
我有一个表单，在每个部分的末尾有一个按钮检查特定FormGroup的有效性，如下所示：
<button md-button color="primary" (click)="checkValidity(changeForm.get('changeOverviewFG'))">Check</button>
这个函数在我的component类中是这样的。
checkValidity(g:
浏览 3提问于2017-11-02得票数 1
回答已采纳
我需要一点帮助来知道如何在同一个构造函数中多次为不同的formControl使用相同的自定义验证器函数，这个函数使用formControl作为参数来知道time1 > time2，我有3个不同的时间formControls，但我不知道如何使用相同的函数来验证所有的formControls，这是我的自定义函数验证器：
/ custom validator to check if time 1 is after time 2
export function timeIsAfter(time1Control: string, time2Control: string) {
r
浏览 2提问于2020-03-03得票数 0
我正在创建这个页面，假设包含多个反应来自(例如每个国家)。这些表单应该是基于我从后端获得的json数组创建的，这样用户就可以看到当前的设置并单独更新。因为我不知道我将获得多少这样的数据集，所以我为我获得的每个数据集创建了一个主表单和一个FormArray。但是，如果在表单验证器将其中一个字段标记为无效时使用FormArray，则整个表单都会被标记为无效(所有FormArray嵌套表单)。
我还尝试为observable中的每个数据集创建不同的表单，但它给出了以下错误
TS2339: Property 'countryForm' does not exist on type &#
浏览 4提问于2019-02-12得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
