如何在另一个ngFor表中正确编写NgModel表单
在另一个ngFor表中正确编写NgModel表单的方法是使用Angular的双向数据绑定。以下是一些步骤和示例代码来实现这个目标：
- 首先，在组件类中定义一个数据模型变量，用于存储表单的值。例如：
public formValues: any[] = [];- 在模板中，使用ngFor指令循环生成表单项，并将ngModel绑定到定义的数据模型变量。为了避免数据模型的冲突，可以使用索引变量来命名ngModel绑定。例如：
<div *ngFor="let item of formValues; let i = index">
<input type="text" [(ngModel)]="formValues[i].value">
</div>- 如果想要在另一个ngFor表中正确编写NgModel表单，并且表单项包含多个字段，则可以使用对象来表示每个表单项。例如：
public formValues: { field1: string, field2: string }[] = [];<div *ngFor="let item of formValues; let i = index">
<input type="text" [(ngModel)]="formValues[i].field1">
<input type="text" [(ngModel)]="formValues[i].field2">
</div>这样，每个表单项都可以正确地绑定到数据模型中的相应字段。
- 对于表单的动态添加和删除，可以在组件类中编写相应的方法来实现。例如，可以添加一个按钮，点击按钮时可以添加一个新的表单项到数据模型中。示例代码如下：
public addForm(): void {
this.formValues.push({ field1: '', field2: '' });
}<button (click)="addForm()">Add Form</button>通过调用addForm()方法，可以在表单中添加新的输入项。
这样，你就可以在另一个ngFor表中正确编写NgModel表单了。记得在模板中使用适当的验证和样式来增强用户体验，并确保在组件类中处理表单的提交和其他逻辑。关于Angular中表单的更多信息，可以参考Angular官方文档中的表单部分。
相关·内容
我有一个从数据库中获得的学生表，如果每个学生缺席，我会尝试为他制作一个'POST‘表单，并将其发送到我数据库中的'absences’表中，就像这样： ? 问题是，当我选择“缺席”的单选按钮时，所有的单选按钮都会被选中，而当我在“教师评论”中写一个输入时，它会被写到表格的所有输入中。我如何解决这个问题，使我的表的每一行都有自己的post函数 这是我的component.ts contacts: [];
upad
浏览 10提问于2021-10-13得票数 0
2回答
text,required:true}的MetaData类，每个属性都有它自己的CarMetaData对象，如何使用CarMetaData对象数组以一种形式显示Car数据 <div class="form-group" *ngFor="let metaData of metadata" >
<input [(ngModel)]="car[metaDat
浏览 0提问于2018-03-25得票数 3
回答已采纳
我在一个组件中定义了这些属性。，它根据currentDefinition显示数据，它是这样设置的：非常感谢
问
浏览 0提问于2016-11-04得票数 1
1回答
例如，如果我使用<my-component>元素或*ngIf指令或某些单向/双向绑定元素(如(click)或[(ngModel)] )，则它不能对任何W3C验证器有效。因此，从开始，我创建了以下摘要以供替换：
*ngIf=“条件”-->数据
浏览 0提问于2016-11-29得票数 3
我已经编写了一个表单，绑定到angular 2组件。当我在任何文本输入中按enter键时，它会启动一个绑定到按钮的(click)事件的方法。这是我按enter键的文本字段：这是被触发的bu
浏览 13提问于2017-08-22得票数 4
回答已采纳
此模型将使用上一页中的用户输入来构建。在当前页面中，我将在HTML表中向用户显示此模型中包含的数据。_cd.detectChanges();}
这个表的row可以有任意数量的元素，如obj、obj1、obj2、objA、objB、objC、objN、.该数据是根据用户在单选按钮上选择的criteria1因此，基于此，表数据将被填充。变量tableColumnCount将有列总数的计数，表应相应更新。为了确定列总数，我尝试
浏览 1提问于2017-12-18得票数 1
我希望在我的表单中有一个下拉列表。我知道如何在dropdown中静态添加选项，但是，我希望它是动态的。我的代码 <ion-label>Select Type</ion-label> <ion-option *ngFor="let item of items"
浏览 1提问于2016-07-01得票数 4
回答已采纳
2回答
在下面的代码中，我有房间类型，可以在其中添加或删除表单组。当我在下拉列表中选择任何房间类型的值时，它应该在它旁边的输入框中填充下拉值。但我想隔离范围。基本上，如果我添加了多个组(下拉列表、文本框)，如果我尝试选择任何下拉列表，那么值应该在它旁边的文本框中反映出来，而不是全部。我试过使用NgModel，但它在所有textbox中填充ngModel名称复制的值。
在我的柱塞里。红色框是我想要的，但这对于单一下拉列表，我可以使用ngModel实现。当我们使用
浏览 1提问于2018-03-15得票数 0
回答已采纳
1回答
基本问题是，验证包含在表行中的控件的正确方法是什么？我有一组类似的html：<input class="form-control" [ngModel]="item.foo" />角2的表单api似乎面向的是一个实际的窗体，而不是表行中的动态控件。api
浏览 1提问于2016-12-12得票数 0
回答已采纳
在分配测试时，选定的员工会被正确分配。回填时，Lead可以看到哪个测试分配给了哪个员工。<form class="cc"> <tbody>
&
浏览 0提问于2020-10-01得票数 0
2回答
如何在*ngFor中使用的其他组件中传递{(ngModel)}？我有一个用NG2-SearchFilter输入搜索和im的导航栏，我需要在另一个组件(带有结果的表)中传递{(ngModel)}，但我不能。navbar.component.html
<input class="form-control" placeholder="Sarch" type="text" name=&q
浏览 8提问于2019-10-22得票数 0
回答已采纳
如果有任何错误，这是我的代码：<ion-select formControlName="employee">
<ion-option *ngFor
浏览 1提问于2017-12-01得票数 4
回答已采纳
3回答
我正在构建一个注册表单，并且必须处理通过*ngFor结构指令生成的多个复选框。control-label">Response Type</label> <div class="checkbox" *ngForclient.responseTypes; let i = index">
浏览 4提问于2017-10-06得票数 2
回答已采纳
1回答
我的html中有一个表单元素。id="category" (ngModelcatCode"> <option *ngFor<
浏览 2提问于2017-03-05得票数 1
我正在工作的场景中，我已经创建了一个表格组件，可以插入到任何html模板。我们可以将不同的数据传递给它并显示。tableData">
<td>{{ 'LABEL.DAY' | translate }}</td> &
浏览 2提问于2017-01-19得票数 1
回答已采纳
不工作，但这是另一个问题。; this.entitySrc.altName = value;
} 在大多数情况下，这似乎如预期的那样工作，但似乎[(ngModel)]绑定只是读取属性，而不是写入属性。因此，例如，如果我更新绑定测试输入，ngFor循环中的Name字段将更新以匹配，但是更新ngFor循环中的Name字段并不会更新测试中的Name字段。那么，如何正确地迭
浏览 25提问于2019-09-27得票数 1
回答已采纳
如果我在第一个组件(url: localhost:4200)中填写表单，然后提交，它会将我重定向到url: localhost:4200/results，其中是另一个组件。一切运行正常，我从第一个表单中获得了正确的值作为预填充值(使用ngModel)。但是，如果我直接转到localhost:4200/results并希望填写该表单，则自动完成不起作用，cosole会抛出错误消息："ERROR TypeError: Cann
浏览 8提问于2019-08-30得票数 0
1回答
我正在努力抑制所需输入的占位符上的星号，并在角度材料2表单中选择字段。submission-select" color="primary" placeholder="Submission Number" md-no-asterisk required> {{sub}}
</md-option
浏览 0提问于2017-02-08得票数 2
我有一个用HTTP调用发送的记录的id，所以我可以在表单中显示该记录，编辑它，然后HTTP进行更新。我认为我对API的GET调用正常，因为我可以在console中看到正确的对象和200状态。但是它不是数组，所以我不知道如何在HTML中显示这个对象。错误:找不到“对象”类型不同的支持对象“对象对象”。NgFor只支持绑定到诸如数组之类的Iterable。
如果我使用类型为any的常规变量，则HTML输入
浏览 1提问于2019-01-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
