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

如何在另一个ngFor表中正确编写NgModel表单

在另一个ngFor表中正确编写NgModel表单的方法是使用Angular的双向数据绑定。以下是一些步骤和示例代码来实现这个目标:

  1. 首先,在组件类中定义一个数据模型变量,用于存储表单的值。例如:
代码语言:txt
复制
public formValues: any[] = [];
  1. 在模板中,使用ngFor指令循环生成表单项,并将ngModel绑定到定义的数据模型变量。为了避免数据模型的冲突,可以使用索引变量来命名ngModel绑定。例如:
代码语言:txt
复制
<div *ngFor="let item of formValues; let i = index">
  <input type="text" [(ngModel)]="formValues[i].value">
</div>
  1. 如果想要在另一个ngFor表中正确编写NgModel表单,并且表单项包含多个字段,则可以使用对象来表示每个表单项。例如:
代码语言:txt
复制
public formValues: { field1: string, field2: string }[] = [];
代码语言:txt
复制
<div *ngFor="let item of formValues; let i = index">
  <input type="text" [(ngModel)]="formValues[i].field1">
  <input type="text" [(ngModel)]="formValues[i].field2">
</div>

这样,每个表单项都可以正确地绑定到数据模型中的相应字段。

  1. 对于表单的动态添加和删除,可以在组件类中编写相应的方法来实现。例如,可以添加一个按钮,点击按钮时可以添加一个新的表单项到数据模型中。示例代码如下:
代码语言:txt
复制
public addForm(): void {
  this.formValues.push({ field1: '', field2: '' });
}
代码语言:txt
复制
<button (click)="addForm()">Add Form</button>

通过调用addForm()方法,可以在表单中添加新的输入项。

这样,你就可以在另一个ngFor表中正确编写NgModel表单了。记得在模板中使用适当的验证和样式来增强用户体验,并确保在组件类中处理表单的提交和其他逻辑。关于Angular中表单的更多信息,可以参考Angular官方文档中的表单部分

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

相关·内容

AngularDart4.0 指南- 表单

模板驱动的形式 您可以通过使用本页描述的特定于表单的指令和技术在Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...您将学习如何构建一个模板驱动的表单,如下所示: ? 英雄就业机构使用这种形式来维护关于英雄的个人信息。 每个英雄都需要一份工作。 让正确的英雄与正确的危机相匹配是公司的使命。...您将在表单添加一个select,并使用ngFor(先前在“显示数据”页面中看到的一种技术)将选项绑定到powers列表。...您将看到表格显示的英雄模型值(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮时,该消失,并且可编辑的表单重新出现。...表单提交,通过ngSubmit事件绑定处理。 模板引用变量,heroForm和name。 双向数据绑定([(ngModel)])。 用于验证和表单元素更改跟踪的NgControl 指令。

17.5K30

AngularDart4.0 指南- 模板语法二 顶

使用HTML表单元素(和)的双向绑定会很方便。 但是,没有原生HTML元素遵循x值和xChange事件模式。...您不能将[(ngModel)]应用到非表单原生元素或第三方自定义组件,除非您编写了一个合适的值存取器,这个技术超出了本指南的范围。...[(ngModel)]语法只能设置数据绑定属性。 如果您需要做更多或不同的事情,您可以编写扩展表单。...如何编写自己的结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见的结构指令: NgIf:有条件地从DOM添加或删除元素。 NgFor:为列表的每个项目重复一个模板。...模板引用变量警告说明 模板引用变量(#phone)与模板输入变量(let phone)不同,您在*ngFor可能看到的那样。 了解“结构指令”指南中的差异。 引用变量的范围是整个模板。

30K20
  • AngularDart 4.0 高级-结构指令 顶

    您可以在分配给ngFor的字符串启用这些功能,这是您在Angular的microsyntax编写的。...当你编写自己的结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor的源代码是了解更多信息的好方法。 模板输入变量 模板输入变量是一个变量,其值可以在模板的单个实例引用。...{{hero.name}} 如果没有宿主元素,通常可以将内容包装在本机HTML容器元素(,然后将该指令附加到该容器...另一个问题:一些HTML元素要求所有直系孩子属于特定类型。 例如,元素需要子元素。 您不能将选项封装在条件或。...满足Angular模板的类似需求。 编写一个结构指令 在本节,您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。

    16.1K20

    AngularDart4.0 指南-体系结构概述 顶

    您可以通过使用Angular的标记组合HTML 模板,编写组件类来管理这些模板,在服务添加应用程序逻辑以及在模块中装入组件和服务来编写Angular应用程序。 然后,通过引导根模块启动应用程序。...注意是如何在原生HTML元素合适的存放。 自定义组件与原生HTML在相同的布局无缝混合。 元数据 ? 元数据告诉Angular如何处理一个类。...每个表单都有一个方向 - 从DOM到DOM,或者在两个方向。...双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号。...Router:在客户端应用程序从一个页面到另一个页面进行导航,而不会离开浏览器 Testing:为您的应用编写组件测试和端到端测试。

    7.9K30

    Angular系列教程-第四节

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

    2.8K50

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

    一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...在使用 ngModel 进行模板绑定时,angular 在 form 标签上自动附加了一个 NgForm 指令,因为 NgForm 指令会控制表单带有 ngModel 指令和 name 属性的元素,而...name 属性则是 angular 用来注册控件的 key,所以在表单中使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 在表单中使用 ngModel...,在响应式表单同样可以使用原生的表单验证器,在设定规则时,需要将模板控件名对应的数据值的第二个参数改为验证的规则 在响应式表单,数据源来源于组件类,因此应该在组件类中直接把验证器函数添加到对应的

    18.9K20

    Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

    要想在双向数据绑定中使用 ngModel 指令,必须先导入 FormsModule 并将其添加到 NgModule 的 imports 列表。...要了解关于 FormsModule 和 ngModel 的更多信息,参阅表单一章。...else只能都通过ng-if来判断 准备 进行 <p ng-if="OwnStatus...修改内容的安全策略 ng-cut 规定剪切事件的行为 ng-dblclick 规定双击事件的行为 ng-disabled 规定一个元素是否被禁用 ng-focus 规定聚焦事件的行为 ng-form 指定 HTML <em>表单</em>继承控制器<em>表单</em>...ng-init 定义应用的初始化值 ng-jq 定义应用必须使用到的库,<em>如</em>:jQuery ng-keydown 规定按下按键事件的行为 ng-keypress 规定按下按键事件的行为 ng-keyup

    5.3K41

    最受欢迎的10大Angular技巧

    s=20 Banana in a box 它有很多名字:banana in a box、双向绑定、输入 - 输出,并且使用起来很方便,比如和 ngModel 配合就很好用。...s=20 RxJS 是一个未开发的世界 使用 RxJS 时,我尝试检查 RxJS 运算符的所有参数和重载,原因是有许多隐藏的选项可以使你更快地编写更强大的流。...s=20 另一个:可以帮助编写具有很好功能的微型.pipe 的运算符。 ? https://twitter.com/marsibarsi/status/1277568971202584576?...s=20 你甚至可以制作自己的 ngFor 替代品 最后一个:Angular 对于 for...of... 之类的指令有特殊的语法。这样,你可以创建自己的 ngFor。...例如,它可以是用于迭代映射的 ngFor。或一个简单的从一个数字迭代到另一个数字的 for: ? ?

    2.1K40

    angular入门教程_初学者织围巾简单教程慢动作

    课程介绍 本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 的 3 个核心概念作为主线:组件、路由、模块,加上业务开发过程必须用到的特性:工具、指令、表单、RxJS、...自动化测试一直是前端开发的一个巨大痛点,由于前端在运行时严重依赖浏览器环境,导致我们一直无法像测试后端代码那样可以去编写测试用例。...模板内的局部变量 属性绑定、事件绑定、双向绑定 在模板里面使用结构型指令 *ngIf、*ngFor、ngSwitch 在模板里面使用属性型指令 NgClass、NgStyle、NgModel 在模板里面使用管道格式化数据...NgModel 使用案例代码: ngModel只能用在表单类的元素上面 <input [(ngModel)]="currentRace.name...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    3.3K20

    AngularDart4.0 指南- 模板语法一 顶

    内置指令 内置的属性指令       NgClass       NgStyle       NgModel ([(ngModel)]) 内置结构指令      NgIf      NgFor          ...您可以使用组件和指令出现的新元素和属性来扩展模板的HTML词汇。 在下面的章节,您将学习如何通过数据绑定来动态获取和设置DOM(文档对象模型)值。...虽然这不完全正确。插值是收敛到属性绑定的一种特殊语法,如下所述。 但首先,让我们仔细看看模板表达式和语句。 模板表达式 模板表达式产生一个值。...该组件具有hero属性,而* ngFor定义了英雄模板变量。 {{hero.name}}的英雄是指变量输入变量,而不是组件的属性。...这个视图在整个渲染过程应该是稳定的。 快速执行 Angular在每个更改检测周期后执行模板表达式。 更改检测周期由许多异步活动触发,承诺的分辨率,http结果,计时器事件,按键和鼠标移动。

    5.2K10

    AngularDart4.0 英雄之旅-教程-03英雄编辑器

    ', 刷新浏览器,页面将显示英雄名 组合HTML和多行模板字符串 要显示所有英雄的属性,请为英雄的id属性添加一个,并为英雄的名称添加另一个。...您需要在表单元素和hero.name属性之间进行双向绑定。...在表单和模板语法页面阅读有关ngModel的更多信息。 @Component(指令:...) 不幸的是,在这个变化之后,应用程序中断!...[(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModel是在angular_forms库定义的有效Angular指令,但默认情况下不可用。...您使用Dart的模板字符串编写了多行模板,以使模板可读。 您使用内置的ngModel指令向元素添加了双向数据绑定。 此绑定显示Hero的名称,并允许用户更改它。

    3.2K10

    AngularDart 4.0 高级-管道 顶

    事实上,您可能会喜欢将它们应用到HTML模板,就像样式一样。 介绍Angular管道,这是一种编写显示值转换的方法,您可以在HTML声明这些转换。 尝试一下实例(查看源代码)。...如果管道接受多个参数,请使用冒号分隔值(slice:1:5) 修改生日模板以给日期管道一个格式参数。...编写第二个组件,将管道的格式参数绑定到组件的format属性。...像样式一样使用它们,将它们放入模板表达式,以丰富视图的吸引力和可用性。 在API参考中探索Angular的内置管道库。 尝试编写一个自定义管道,并可能将其贡献给社区。...--> 您通过文本字符串来识别排序字段,期望管道通过索引引用属性值(hero

    6.4K20
    领券