用fromGroup生成角度动态formControlName
从您提供的问题来看，您想了解如何使用fromGroup生成角度动态formControlName。以下是关于此问题的完善且全面的答案：
Angular中的formGroup和formControlName是用于处理表单的关键组件。formGroup是一个用于将表单控件组织成一个逻辑组的类，而formControlName是用于将表单控件与formGroup中的特定控件绑定的指令。
下面是使用formGroup生成角度动态formControlName的步骤：
- 导入所需的模块和类：
- 导入所需的模块和类：
- 在组件类中创建一个
FormGroup实例，并定义要动态生成的控件： - 在组件类中创建一个
FormGroup实例，并定义要动态生成的控件：
在上述示例代码中，首先我们使用formBuilder创建一个空的FormGroup实例。然后，使用forEach遍历controlNames数组，并根据数组中的每个控件名动态地使用addControl方法向FormGroup中添加控件。
最后，在模板中使用*ngFor指令循环遍历controlNames数组，并使用[formControlName]指令将每个控件与FormGroup中的特定控件进行绑定。
通过上述步骤，我们就可以使用FormGroup和formControlName来生成角度动态的表单控件。
关于FormGroup和formControlName的更多信息，您可以参考以下链接：
- Angular文档中关于FormControlName的介绍
- Angular文档中关于FormGroup的介绍
注意：由于要求不提及特定云计算品牌商，因此没有提供与腾讯云相关的产品和链接。
相关·内容
3回答
我有这个模板 <div [fromGroup]="myForm">
<input [formControl]="myFormControl" [formControlName]="formControlName">
</div> 我在想我能不能把其中一个绑起来。例如，如果formControl有数据，我想这样做。 <div>
<input [formControl]="myFormControl">
</div> 但是，如果formControl为空，我
浏览 26提问于2019-05-10得票数 4
请通过链接()了解ng-选择多个复选框.
我试图在我的Range6应用程序中使用ng-select “GroupSelect子程序”。
我在使用ng-select "Group选择子“时遇到了问题，使用了反应性表单，而不是模板驱动的表单。
我已经厌倦了
<ng-select
[items]="userGroupsList"
[multiple]="true"
bindLabel="name"
groupBy="gender"
浏览 0提问于2018-09-19得票数 10
回答已采纳
目前使用反应式，有这样的情况，我们需要使用输入类型作为数字，并防止非负数，因此使用以下方法 <input type="number" class="form-control input-box" formControlName="test" required onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && e
浏览 8提问于2019-01-08得票数 0
1回答
我有一个表，它正在表单控件值数组上循环。
<tbody>
<tr *ngFor="let t of intakeForm.get('tasks').value let i = index; trackBy:trackByIndex" [taskTR]="t" [ui]="uiOptions" [intakeForm]="intakeForm"></tr>
</tbody>
在我的TR组件中，TD是所有的TD数据，非常标准的东西。
但是，我在其中一个TD中有一个输入
浏览 0提问于2017-12-20得票数 1
回答已采纳
2回答
我在一个FormGroup中定义了一个FormArray。我在一个特定的FormControl中设置一个值。但是，当我在特定控件中使用setValue方法设置值时，该值将在同一formGroup中的其他控件中复制。
this.listItemForm = this.formbuilder.array([]);
let fromGroup_ = formbuilder.group({
'8c159f74-b4208eae_image1_page1_1': [''],
'8c159f74-b4208eae_image2_page1_1': [
浏览 6提问于2022-03-29得票数 0
2回答
我使用的是角度，我有一个反应形式来编辑一个项目。打开用于编辑的组件时，对象的输入加载值是正确的，但如果不单击输入和更改值，则反应性形式的值为空。
我的密码是：
<form [formGroup]="entidadesForm">
<div class="row">
<div class="col-lg-12">
<nb-card>
<nb-card-header>Digite
浏览 0提问于2018-06-21得票数 3
回答已采纳
1回答
角2分量的继承
、、、
我正在使用ANgular 2在当前的项目中实现动态表单系统，到目前为止进展顺利，但我发现了以下问题：
我有两个表示表单控件的组件，例如：
@Component({
selector: 'app-text-area',
templateUrl: './text-area.component.html',
styleUrls: ['./text-area.component.css']
})
export class TextAreaComponent implements OnInit {
label: string;
浏览 3提问于2017-08-21得票数 1
回答已采纳
我希望第一个select可以动态地更改另一个select值。
<form [formGroup]="myForm">
<div class="modal-body">
<p><strong>Rate:</strong></p> {{ApplesPerCash}} <p><strong> kg / Pound </strong></p>
<p>Action:
浏览 0提问于2019-07-21得票数 0
回答已采纳
3回答
使用角度的动态UI
、、、
我有一些JSON数据，使用这些数据必须用角显示UI。JSON数据非常动态。它可以有多个新字段，可以被n次嵌套等等。基本上，它可以是非常动态的。是否有相应地绘制动态UI的方法？
一般来说，这是明智的，还是更好的一些后端层做这个数据处理，并将处理后的数据到角？
更新1
谢谢大家的建议。但我认为问题的第二部分并没有被任何人提及。让我再问一遍。无论如何，角将不得不动态地绘制UI。但在此之前，我们需要处理JSON数据。那么，我在这里的问题是，谁将是进行数据处理的最佳实体？后端层还是角层？因此，基本上，我的怀疑是，什么应该是输入角？是JSON数据还是已处理的数据？哪种方法更好？
浏览 0提问于2018-12-07得票数 0
我正在用angular构建一个动态表单，我仍然在努力理解使用FormGroup和FormGroup以及FormControlName和FormControlName之间的区别
浏览 13提问于2019-03-03得票数 2
我使用了autocomplete="false“(”/no/no/new“)。
在formControl和FromGroup中，甚至我都尝试使用指令，使用本机元素并将属性设置为false。
但是，我仍然没有禁用自动完成/自动填充的解决方案。
是否可以通过使用我们的脚本将浏览器级别设置更改为关闭自动建议/自动填充？
我试过很多次了，但我做不到。这里我附加了我使用表单级和指令级的代码。
<form [formGroup]="loginForm" autocomplete="off">
<input matInput placeholde
浏览 6提问于2022-04-07得票数 0
我以我的形式通过动态设置senderAddress。但是仍然没有启用submit按钮。
这是我的html：
<input type="text" class="form-control" placeholder="Senders's Address"
formControlName="senderAddress" #searchSenderAddress>
在ts中：
@ViewChild("searchSenderAddress") public searchSen
浏览 0提问于2018-05-22得票数 0
2回答
我试图从JSON模式递归地生成动态表单，但我很难找到表单控件。下面是代码示例。
我知道这个错误
错误:无法找到名称为“createdAt”的控件
我尝试过不同的方法，但仍然有一个问题。我知道我错过了一些事所以请帮帮忙。任何帮助都将不胜感激。
app.components.ts
export class AppComponent implements OnInit {
filterForm: FormGroup;
filterFields: any[];
constructor(private fb: FormBuilder) {}
ngOnInit() {
thi
浏览 4提问于2019-12-11得票数 2
回答已采纳
我不知道如何为我的数据类型显示正确的输入表(或者我构造FromGroup的方式是否有效)，所以我在这里介绍了我的组件 export class FoiFormComponent {
listForm = new FormGroup({
fois: new FormArray([
new FormArray([
new FormControl('01-01-2021'),
new FormControl('101'),
new FormControl('201')]),
浏览 16提问于2021-04-03得票数 0
1回答
角中的清晰验证错误消息
、、、
我有一份打字稿：
dataxForm: fromGroup
this.dataxForm = new FormGroup({
'Description':new FormControl(null, Validaros.required};
'Name':new FormControl(null, Validators.required})
我有一个html：
<mat-divider></mat-divider>
<form [formGroup]="dataxForm">
<ng-template #e
浏览 3提问于2021-12-13得票数 -1
我正在使用model driven forms，我正在寻找一种更好的方法将数据绑定到与formControlName相关的数据，因为我的表单上有超过25个字段，而且我不想像下面所写的那样为所有字段编写代码。
模板：
<input type="text"
class="form-control"
formControlName="firstName"
name="firstName"
placeholder="First Name"
requ
浏览 3提问于2017-02-22得票数 2
回答已采纳
我现在有一个fromGroup，我想根据数据库值动态地生成一些输入字段。例句:我喜欢
{
type:"text",
name:"test_name"
placeholder:"Test"
}
I have created input field like:
<input type="text" name="test_name" placeholder="Test">
到目前为止我已经试过了，
向我的FormGruop添加动态控件
this.applicatio
浏览 0提问于2019-04-23得票数 1
回答已采纳
新：
所以我可以让它和你的无线电组一起工作，或者用正确的绑定。我不能让这两者都起作用。
这是允许的：
<div *ngFor="let column of row.controls.columns.controls; let j = index">
<ion-list radio-group [formControlName]="'col'+j">
<ion-radio></ion-radio>
浏览 0提问于2018-09-14得票数 2
回答已采纳
1回答
我正在我的角9应用程序中实现。这意味着我将用原子、分子和有机体来构建我的网页。除了ReactiveFormsModule，一切都很好。
我想将<input />转换成它自己的组件，这样我就不必总是重复相关的HTML。然而，反应形式没有任何一种。
下面的示例是返回一个错误onload：ERROR Error: No value accessor for form control with name: 'field2'
我用完整的代码制作了一个示例。
app.component.ts
import { Component } from '@angular/cor
浏览 3提问于2020-07-07得票数 5
回答已采纳
我有包含FormArray的FormGroup。FormArray中的每个FormControls都是由系统生成的，如下所示：
staffs: FormArray = { staffs: [
{id: 1, staffName: "Jimmy", staffRate: 10},
{id: 2, staffName: "Steffan", staffRate: 20},
{id: 3, staffName: "Devon", staffRate: 30},
{id: 4, staffName: "Jo
浏览 26提问于2019-03-28得票数 4
回答已采纳
我有一个带有2个FromGroups (用户和地址)的表单
我得到以下错误：
core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find control with name: 'street'
当我使用这个类时
export class FormBuilderComp {
addUserFrom: FormGroup;
constructor( @Inject(FormBuilder) fb: FormBuilder) {
this.ad
浏览 2提问于2017-04-20得票数 25
回答已采纳
在实现我的代码时，我在控制台中得到以下错误
错误:无法在FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4454)的setUpControl (forms.js:1640)处找到名称为“password”的控件，在FormControlName.Push./node_node/@ar角/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4909) at che
浏览 3提问于2019-07-30得票数 0
我有：
主要组件(也包括主formGoup) -寄存器格式
子组件(也是子formGoup) -行
如您所见，我的主窗体(没有子窗体)已禁用，您可以单击“编辑”按钮启用它。我也希望子组件是那样的。因此，整个表单是禁用的，单击编辑按钮就启用了(您可以键入、选择等)。我该怎么做呢？我试过这样做：
constructor(private formBuilder: FormBuilder) {
this.registerForm = this.formBuilder.group({
username: [{value: '', disabled:
浏览 1提问于2021-07-13得票数 0
回答已采纳
在我的角应用程序试图在表单数组中添加一个带有两个表单控件的动态表单组中，我如何能够在这里动态添加表单控件？我试着用这种方式添加[formControlName]="i"，但是得到了这个Cannot find control with path: 'dinings -> 0 -> 0'。
如果我以静态方式添加formControlName="name"和formControlName="cuisine"，则不会获得错误，但表单控件中的值在添加后不会更新。
我就是这么做的-
<div>
<f
浏览 1提问于2021-06-09得票数 0
回答已采纳
我有简单的角2格式代码如下
<form [formGroup]="myForm" (ngSubmit)="onSubmit()" class="formcss">
Username<br>
<input type="text" formControlName="username"><br><br>
<div>
Email<br>
<input id="email"
浏览 3提问于2016-09-21得票数 4
回答已采纳
我正在构建一个角度应用程序。将根据父控件中的条件动态构建子控件列表。
动态控件嵌入在父窗体中：
<app-dynamic-form [searchItem]="searchItemValue"></app-dynamic-form>
以下是表单设置的代码：
//form group setup
this.searchForm = this.fb.group({
category: this.fb.control('', [Validators.required]),
searchItem: this
浏览 1提问于2022-11-10得票数 0
我正在用Angular构建一个动态表单。一切正常，直到我尝试动态生成ngbDatePicker输入，页面完全冻结。 有人知道在动态插入ngbDatepicker时导致页面挂起的原因吗？ 提前谢谢。 dynamic-form.component.html： <form (ngSubmit)="onSubmit()" [formGroup]="form">
<app-form-detail-row *ngFor="let field of fields" [formControlName]="field.name&
浏览 21提问于2021-08-06得票数 1
我有一个内置在Angular 7中的库自定义表单组件。每个组件都是原生input、textarea、checkbox元素的包装器。我已经实现了ValueAccessor，使它们可以与ngModel和formControl/formControlName一起工作。在声明式使用的情况下，事情运行得很好。 对于ex。 <custom-textbox label="Name" required formControlName="name"></custom-textbox> 在我的用例中，我必须从JSON动态创建自定义表单组件，我已经使用Com
浏览 11提问于2019-02-12得票数 0
2回答
需要：
使用type属性动态创建一个输入。就像这样：<input id="{{ field.id }}" formControlName="{{ field.code }}" type="{{ field.type }}" />
在FormGroup (reactive )中使用上面带有“复选框”动态值的输入。
问题：
当我动态设置类型的属性时，问题就出现了，当我用false初始化FormControl时，它导致在DOM中创建带有属性value="false“的复选框。因此，FormGroup永远不会更新。
浏览 2提问于2018-02-06得票数 3
回答已采纳
创建由以下“嵌套对象”(构建)组成的嵌套表单：
export class Building{
id: number = 0;
doorsCount: number = 0;
description: string = '';
address: Address = new Address();
buildingType: BuildingType = new BuildingType();
}
export class Address{
id: number = 0;
description: string = '';
}
expo
浏览 0提问于2017-08-13得票数 3
回答已采纳
2回答
我想从角度上使用ValidatorFn接口实现一个自定义的交叉域验证器。
这是我的代码：(我遵循了上提供的步骤)
import { ValidatorFn, ValidationErrors, FormGroup } from "@angular/forms";
/**
* This validator implements the ValidatorFn Interface from Angular.
*
* @param formGroup- the FormGroup that needs Validation
*
* @returns null if the f
浏览 9提问于2020-08-07得票数 5
回答已采纳
当我点击动态创建的Cannot find control with name: 'create_param[0]'复选框时，我会得到一个角度上的。下面是我使用的代码：
exercise-create.ts
{
this.exerciseForm = this.formBuilder.group({
exerciseName: ['', [Validators.required, Validators.maxLength(64)]],
exerciseDescription: ['', [Validators.requ
浏览 6提问于2019-10-01得票数 1
我收到一组来自API的问题。每个问题都有问题id。如何将问题id动态绑定到formControlName
浏览 0提问于2018-08-29得票数 1
我用的是角度。有一个textarea元素。
<textarea rows="17" class="form-control" formControlName="sqlCode"
当用户在sql中输入时，我希望对其进行颜色编码。例如，SELECT应该是蓝色的，是，是。。。最简单的SQL颜色编码。我怎样才能做到这一点？我试着查找文档，但是找不到改变文本区域颜色的方法。
浏览 0提问于2019-07-27得票数 0
回答已采纳
我在创造一个角度上的反应形式。要将FormControl对象从类型记录文件同步到html文件中的表单控制，您需要使用formControlName指令。这项工作如下：
formControlName="xyz"
其中xyz是在类型记录文件中定义的FormControl对象的键。但在本例中，xyz被视为字符串，不会得到评估。所以我怀疑，由于xyz是FormControl对象的一个键，所以应该对它进行计算，并且必须使用方括号，如
[formControlName]="xyz"
我对FormGroup的使用方式感到满意，因为它与方括号一起使用，如下所示：
[FormG
浏览 0提问于2019-10-07得票数 0
回答已采纳
谢谢你阅读我的问题！
我正在使用Ionic 3创建一个应用程序。在这个应用程序中，有一个多达200个相同形式的页面，每个页面都有一个输入，比如：。是我输入了"input3“、"input4”等来表示输入空间的位置。
用户选择在配置模式的页面上有多少这样的表单，所以i不能静态地创建这些表单。因此，我使用以下代码在HTML上创建了这些表单：
<form>
<ion-row *ngFor="let y of rowCount|times" text-center align-items-center>
浏览 1提问于2018-02-07得票数 2
回答已采纳
1回答
我正在尝试添加我的对象数组来映射primeng复选框，并希望获得所选复选框的值。
我尝试过FormControlName，但它在提交后抛出了未定义的内容。
下面是粗略的代码
data = [
{ type: dropdown
text: 'drop',
num: 1.23,
options: [
{
value=1,
text= 'drop1
},{
value=2,
text= 'drop2
}
]
},
浏览 2提问于2020-02-13得票数 7
回答已采纳
我有一个添加动态输入字段的按钮。
到目前为止，这就是我所拥有的：
<input id="field" matInput formControlName="field">
但就目前而言，这只是静态的。假设我们有3个输入字段，那么我希望formControlName field是一个数组。
在HTML中，您可以这样做：
<input type="text" name="field[]" value="foo">
<input type="text" name="fi
浏览 1提问于2022-07-25得票数 0
回答已采纳
这是我以静态方式创建的内容。我使用的是Angular 4。
this.contactForm = this.fb.group({
firstname: ['', Validators.required],
lastname: ['', Validators.required],
zipCode: ['', Validators.required],
hobbies: this.fb.group({
hobbies0: ['', Validators.required],
hobbies1:
浏览 0提问于2018-02-17得票数 0
在这种形式中，我必须访问formControlName="last“的控件，以显示它的错误。
<div [formGroup]="form">
<div formGroupName="name">
<input formControlName="first" placeholder="First name">
<input formControlName="last" placeholder="Last name">
<span *ngI
浏览 4提问于2017-11-15得票数 3
这是一个简单的问题，我在这里只问这个问题，因为在:h :hi下，我在Vim的帮助下找不到答案。我见过一些人使用hi，另一些人使用hi!，比如hi Visual guibg=#FFEC8B vs hi! Visual guibg=#FFEC8B 或 hi link CursorLineNr Visual vs hi! link CursorLineNr Visual。他们之间有什么区别吗？据我所知，邦!符号切换设置。但是当我运行它们时，无论我使用hi还是hi!，都会得到相同的结果。
浏览 4提问于2021-12-16得票数 -1
回答已采纳
在括号内使用formControlName与不使用括号有什么区别？在动态表单教程中，formcontrolname在括号内使用。
[formControlName]="dyncontrol.key"
但在其他的教程中，我看到了没有他们
formControlName="name"
浏览 5提问于2016-09-14得票数 16
回答已采纳
1回答
我从Web公开了嵌套的json格式。有人能帮我从Angular5发送相同格式的数据吗？
{"contractId":1,
"contractName":"Temp",
"contractServiceList":[
{"id":1,
"serviceId":{"serviceId":1,"serviceName":"Emergency Room"},
"providerTier":"Tier 1&
浏览 0提问于2018-09-02得票数 1
回答已采纳
我有一些奇怪的行为，我不知道该怎么处理。
我有一个模板，这是一个大表单，但我将只显示一个输入字段的错误显示。
<form [formGroup]="myForm" (ngSubmit)="submitForm()" class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="idCourse" class=&#
浏览 7提问于2022-03-10得票数 0
回答已采纳
我创建了一个angular 6项目，在其中获取一个嵌套的公司对象，该对象包含多个要在视图中显示的地址。我希望每个子视图只显示其中的两个，并使用分页来显示其余的。我使用ngx分页和反应式表单。
但不幸的是，分页不能正确工作。它只显示前两个地址(如果"pageSize“= 2)，并且当我单击分页控件时没有任何变化。只有"currentPage“的值(在我的例子中是p-)才会改变。
如果我检查我的公司对象，它将填充该公司的所有现有地址，但我不会将它们清除。
我做错了什么？
如果我更改"itmesPerPage“，我可以显示所有现有地址的数量--仅此而已。
对于测试，我使用了“
浏览 3提问于2019-04-19得票数 2
在我的角度应用程序，我有3个输入-代码，名称和价格添加更多的按钮在表的末尾，当点击添加更多的按钮，应该有一个重复的行。所有这些都很好，但是我需要获取这个动态框值的值。
下面是代码表：
<form class="form-horizontal" (ngSubmit)="Data(addForm)" [formGroup]="addForm">
<tr *ngFor="let field of fieldArray; let i = index">
<td><input ty
浏览 0提问于2018-05-14得票数 0
回答已采纳
我很难在一个<mat-checkbox>中设置ReactiveForm，并在测试时为表单控制.获取无值访问器。
当我在开发模式下运行应用程序时，它的工作方式与预期的一样。
使用时：
<mat-checkbox
id="allDay"
type="checkbox"
formControlName="allDay">
<!-- i18n: @@event.allDay -->All Day Event?<!-- /i18n -->
</mat-checkbox>
运行n
浏览 5提问于2017-11-10得票数 1
回答已采纳
我有一个包含输入标记的子组件，我需要在父组件中设置formControlName，但是我得到了一个错误
child.html
<form [formGroup]="formGroupName">
<div class="input">
<input type="text" [formControlName]="formControlName" />
<span class="label">{{ label }}</s
浏览 2提问于2020-07-11得票数 0
回答已采纳
5回答
我希望删除未使用NgIf呈现控件的验证。我试图使用指令删除隐藏控件，但不能这样做，因为它没有在模板中呈现。因此，我不能在指令中检查formControlName和ElementRef。这是ts文件
this.form = this._fb.group({
text1: ['', Validators.required],
text2: ['', Validators.required]
});
和模板
<form[formGroup]="form">
<input type="text" formC
浏览 1提问于2018-04-23得票数 10
回答已采纳
我允许用户动态创建输入字段。对于这些输入域中的每一个，我希望将其连接到不同的mat-autocomplete，以便它们彼此独立地工作。我在这里遇到了麻烦，因为我不能动态地创建连接自动完成和输入的元素引用(这里是#auto)。我该如何实现这一点？
<div
class="row"
*ngFor="let field of getControls('requestFields'); let i = index"
formArrayName="requestFields"
>
<ng-container
浏览 5提问于2018-08-02得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
