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

如何使用对象数组在angular 9中获取表单数据[2020年7月29日更新问题]

在 Angular 9 中,你可以使用对象数组来获取表单数据。以下是实现这一功能的步骤:

基础概念

  1. 表单控件:Angular 表单中的每个输入字段都是一个表单控件。
  2. 表单模型:表单控件的值被存储在一个表单模型中,可以是 FormGroupFormArray
  3. 对象数组:一个包含多个对象的数组,每个对象代表表单中的一条记录。

相关优势

  • 灵活性:对象数组允许你动态添加或删除表单记录。
  • 可维护性:代码结构清晰,易于维护和扩展。
  • 数据绑定:Angular 的双向数据绑定机制可以轻松地将表单数据与对象数组同步。

类型

  • FormGroup:用于管理一组相关的表单控件。
  • FormArray:用于管理一组同类型的表单控件。

应用场景

  • 动态表单:用户可以添加或删除表单项。
  • 数据录入:如订单管理系统、客户信息管理等。

示例代码

假设我们有一个简单的表单,用户可以添加多个地址记录。

HTML 模板

代码语言:txt
复制
<form [formGroup]="addressForm">
  <div formArrayName="addresses">
    <div *ngFor="let address of addresses.controls; let i = index" [formGroupName]="i">
      <input formControlName="street" placeholder="Street">
      <input formControlName="city" placeholder="City">
      <button type="button" (click)="removeAddress(i)">Remove</button>
    </div>
  </div>
  <button type="button" (click)="addAddress()">Add Address</button>
</form>

TypeScript 组件

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-address-form',
  templateUrl: './address-form.component.html',
  styleUrls: ['./address-form.component.css']
})
export class AddressFormComponent implements OnInit {
  addressForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.addressForm = this.fb.group({
      addresses: this.fb.array([])
    });
  }

  get addresses() {
    return this.addressForm.get('addresses') as FormArray;
  }

  addAddress(): void {
    const addressGroup = this.fb.group({
      street: ['', Validators.required],
      city: ['', Validators.required]
    });
    this.addresses.push(addressGroup);
  }

  removeAddress(index: number): void {
    this.addresses.removeAt(index);
  }
}

参考链接

常见问题及解决方法

  1. 表单控件未绑定
    • 确保在 HTML 模板中正确使用 formControlNameformGroupName
    • 确保在 TypeScript 组件中正确创建和初始化表单控件。
  • 动态添加表单项时数据未同步
    • 确保在 addAddress 方法中正确创建和添加 FormGroupFormArray
  • 删除表单项时数据未同步
    • 确保在 removeAddress 方法中正确删除指定索引的 FormGroup

通过以上步骤和示例代码,你应该能够在 Angular 9 中使用对象数组获取表单数据。如果遇到具体问题,请提供更多详细信息以便进一步诊断。

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

相关·内容

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

一、Overview angular 入坑记录的笔记第三篇,介绍 angular表单控件的相关概念,了解如何angular 中创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式的创建表单控件实例 组件类中进行显示的创建控件实例 表单验证 指令 函数 表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...name 属性则是 angular 用来注册控件的 key,所以表单使用 ngModel 进行双向数据绑定时,必须要添加 name 属性 4.2.2、跟踪表单控件的状态 表单使用 ngModel...某些情况下,我们只是想要更新控件组中的某个控件的数据值,这时需要使用 patchValue 的方式进行更新 import { Component, OnInit } from '@angular/core...模板驱动表单中,因为不是直接使用的 FormControl 实例,因此这里应该在模板上添加一个自定义的指令来完成对于控件数据的校验 使用 angular cli 创建一个用来进行表单验证的指令 ng

18.9K20

(转) 别再对 Angular 表单的 ControlValueAccessor 感到迷惑

然后我将展示如何封装第三方组件作为 Angular 组件,以及如何使用输入输出机制实现组件间通信(译者注:Angular 组件间通信输入输出机制可参考官网文档),最后将展示如何使用 ControlValueAccessor...来实现一种针对 Angular 表单新的数据通信机制。...FormControl 和 ControlValueAccessor 如果你之前使用Angular 表单,你可能会熟悉 FormControl ,Angular 官方文档将它描述为追踪单个表单控件值和有效性的实体对象...本文我将使用原生表单控件术语来区分 Angular 特定的 formControl 和你 html 使用表单控件,但你需要知道任何一个自定义表单控件都可以和 formControl 指令进行交互,而不是原生表单控件如...// and set this value to the native control // 设置 Angular 表单控件值更新监听器,每当 Angular 表单控件值更新,原生控件值也更新

3.8K20
  • Angular 从入坑到挖坑 - 模块简介

    一、Overview Angular 入坑记录的笔记第七篇,介绍 Angular 中的模块的相关概念,了解相关的使用场景,以及知晓如何通过特性模块来组织我们的 Angular 应用 对应官方文档地址:...@angular/common 使用 NgIf、NgFor 之类的内置指令 FormsModule @angular/forms 使用 NgModel 构建模板驱动表单 ReactiveFormsModule...@angular/forms 构建响应式表单 RouterModule @angular/router 使用前端路由 HttpClientModule @angular/common/http 发起...每个组件都只能声明一个 NgModule 类中,同时,如果你使用了未声明过的组件,Angular 将会报错 同样的,对于当前模块使用到的自定义指令、自定义管道,也需要在 declarations 数组中进行声明...imports imports 数组表明当前模块正常工作时需要引入哪些的模块,例如这里使用到的 BrowserModule、AppRoutingModule 或者是我们使用双向数据绑定时使用到的 FormsModule

    1.8K20

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    Angular scope 模型上设置了一个 监听队列,用来监听数据变化并更新 view 。    ...所以说不要怀疑用户输入表单angular 会不会监听页面左边导航栏的变化。 如何优化脏检查与运行效率 脏检查慢吗? 说实话脏检查效率是不高,但是也谈不上有多慢。简单的数字或字符串比较能有多慢呢?...ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题如何解决? 会提示 Duplicates in a repeater are not allowed....,然后会一直更新数据,效率低,脏数据检查到10次之后不再继续检查; 解决方案:可以使用一个变量来接收函数调用 controller as 和controller 有什么区别,能解决什么问题?...编译模板后如何获取编译后的模板内容并将其转成字符串

    7.8K40

    AngularJS入门 & 分页 & CRUD示例

    {{ }}:双括号,是 angularJS 插值表达式,利用括号获取值,同时也可以花括号中编写表达式。... {{100+100}} 2.2 ng-model: (双向绑定) ng-model 指令用于绑定变量/表单元素,这样用户文本框输入的内容会绑定到变量上...2.5 ng-controller: (指定控制器) $scope 的贯穿整个AngularJS App应用,所有变量,函数,对象全都绑定在$scope对象中,它在视图和控制器间建立一个通道,基于作用域视图修改数据时会立刻更新...======================== //1.定义新增和更新时保存表单数据的变量 $scope.entity = {}; //2.新增/更新的保存方法 :...(存入id) } else { //$scope.selectIds.indexOf(id)获取当前id所在位置,splice是前端数组移除(需要两个参数)

    3.3K40

    浅谈 Angular 项目实战

    搭建开发环境 开发环境的搭建非常简单,使用 Angular CLI 几乎可以完成所有工作,但是与后端联调接口的时候,还需要做一些自定义配置。...其中使用 ng build 打包后可能会有资源引用错误的问题,可以看一下使用 ng build 构建后资源地址引用错误的问题。...联调接口时,可能还会遇到传输 Cookie 的问题,具体可以参见 关于 Angular 跨域请求携带 Cookie 的问题。...其中模板驱动表单简单灵活,适用于不复杂的表单数据。 关于表单这一块,我们将 Angular 和 Vue 放在一起说,Vue 的表单绑定就属于模板驱动表单。...不过 Angular 的模板驱动表单并没有复选框的多选绑定,如果有这个需求,可以选择更加灵活强大的响应式表单进行数据绑定。其实,对于数组形式的数据可以使用天然的 select 多选框实现。

    4.6K00

    前端面试知识点

    MVVM = MVP + 新特性(bind等) 平时怎么解决浏览器兼容问题(具体问题的解决方案) 1、默认padding,margin不同 解决:自定义初始化css 2、一个div中放一个img,但是...(style = 0, opacity = 50); 数组的操作方法 join,push,pop,map,forEach,every,some,filter,concat,splice 如何进行性能优化...如何接受props 如何进行props类型验证 组件的生命周期函数 三大周期 7个生命周期函数 修改组件状态 进行数据双向绑定 ref的使用方式 路由的使用方式 路由守卫 flux架构 view action...dispatcher store redux 框架 view store reducer 异步action 如何进行性能优化 虚拟dom react和vue中的diff算法 angular 模块...组件 服务 管道 什么是依赖注入 如何使用路由 参数快照 参数订阅 响应式编程 angular中的模板式表单和响应式表单 如何表单验证 angular-cli的使用方式 如何创建组件 创建服务 创建类

    1.6K10

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

     Rx--隐藏在Angular 2.x中利剑 一文中我们已经初步的了解了 Rx 和 Rx Angular 的应用。 今天我们一起通过一个具体的例子来理解响应式编程设计的思路。...如果我们使用 age$ 代表年龄数据流(那个 $ 代表 Stream -- 流的意思,约定俗成的写法,不强制要求),用 ageUnit$ 代表年龄单位数据流的话,我们可以写出如下的合并逻辑,为了简化问题...响应式表单中的 Rx Angular表单处理非常强大,有模版驱动的表单和响应式表单两类,两种表单各有千秋,不同场合可以分别使用,甚至混合使用,但这里就不展开了。...Angular 中处理响应式表单只有 3 个步骤: 1、组件的 HTML 模版中给要处理的控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...这两个数据流其实是来自于两个控件的值的变化,而响应式表单获取值的变化是非常简单的就一行: 上面这行代码的意思是从表单的控件数组中取得 formControlName 为 age 的这个控件然后监听其值的变化

    5.3K10

    Vue 2.0 学习总结,精华全在这里了

    模板语法 就是如何在.vue文件的template标签中书写内容 {{}}(Mustache语法)里面会按照纯文本输出 v-once指令只会执行一次性地插值,当数据改变时,插值处的内容不会更新。...循环渲染的时候要动态的绑定v-bind:key,这样可以提升vue的渲染效率 Vue 包含一组观察数组的变异方法,只要调用它们将会触发视图更新,并且改变了原数组 push() pop() shift(...因为Vue只有浏览器解析和标准化HTML后才能获取模版内容 再准确的说也就是用Vue.component方法自定义的组件 is特性可以解决这个问题 ?...☆注意在JavaScript中对象数组是引用类型,指向同一个内存空间,如果prop是一个对象数组子组件内部改变它会影响父组件的状态。...$refs.标记的名称或得到该组件 当ref和v-for一起使用时,ref是一个数组对象,包含相应的子组件。 $refs只组件渲染完成后才填充,并且它是非响应式的。

    4K110

    vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

    Vue基础语法: 实例对象,生命周期,模板语法,计算属性,methods方法 Vue渲染: 列表渲染,条件渲染 Vue事件与表单: 事件处理,事件对象,事件委派,表单处理 MVX模式简介: MVX框架模式...Angular是谷歌推出的MVVM框架,功能强大,含有模板,数据双向绑定,路由,模块化,服务,自带了丰富的Angular指令,由谷歌维护。...view层执行一个数据的双向绑定,view触发后告诉viewmodel对象的dom listeners事件的监听机制,从而更新model层中的数据,当model层中的数据发生变化后,交给数据双向绑定机制...,也会告诉view层要更新数据。...第一种方法:使用Vue.set()或vm对象.$set()形式修改数组元素 第二种方法:使用数组变异方法修改数组元素 Vue.set(vm.list, 0 '10') "10" vm.

    4.1K20

    【17】进大厂必须掌握的面试题-50个Angular面试

    Angular中的Annotation和Decorator有什么区别? 使用Reflect Metadata库,角度注释是类的“唯一”元数据集。它们用于创建“注释”数组。...Angular中,数据绑定有四种形式: 字符串插值 属性绑定 事件绑定 双向数据绑定 13.Angular使用过滤器的目的是什么?... 单向数据绑定中,无论何时更改数据模型,“视图”或“ UI”部分都不会自动更新。您需要手动编写自定义代码,以便在每次视图更改时对其进行更新。...高级水平–面试问题 46.Angular中,描述如何设置,获取和清除cookie?...如果您的数据模型是”区域”之外更新的,请说明该过程,您将如何查看视图?

    41.4K51

    Angular Input和Output

    实际应用场合,我们主要用来实现父组件向子组件传递数据Angular 应用是由各式各样的组件组成,当应用启动时,Angular 会从根组件开始启动,并解析整棵组件树,数据由上而下流下下一级子组件。...子指令调用已创建的 EventEmitter 实例中的 emit(payload) 方法来触发一个事件,父指令通过事件绑定 (eventName) 的方式监听该事件,并通过 $event 对象获取 payload...通过上面的实例,我们知道我们可以 AppComponent 父组件中监听 CounterComponent 子组件的 change 事件,然后 change 事件中更新 initialCount 的值...ngModel 使用Angular 1.x 的读者,应该很熟悉 ng-model 这个指令,我们通过它来实现数据的双向绑定。那么 Angular 中有对应的指令么 ?...ngModel 实例,进行获取控件的状态,控件状态分类如下: valid - 表单值有效 pristine - 表单值未改变 dirty - 表单值已改变 touched - 表单已被访问过 untouched

    2.4K50

    常见react面试题(持续更新中)

    这样的表单元素会维护自身的状态,并基于用户的输入来更新。...,旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的,并不会触发额外的render调用。...使用好处: 在这个生命周期中,可以子组件的render函数执行前获取新的props,从而更新子组件自己的state。...这三个问题在一定程度上阻碍了 React 的后续发展,所以为了解决这三个问题,Hooks 基于函数组件开始设计。然而第三个问题决定了 Hooks 只支持函数组件。...因为 Hooks 的设计是基于数组实现。调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误的 Hook。当然,实质上 React 的源码里不是数组,是链表。

    2.6K20

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样的开发模式

    对应的国际官网 GLOSSARY CHEAT SHEET NGMODULE FAQS ARCHITECTURE OVERVIEW 英文水平比较好的推荐国际官网,这边的API更新很及时 ---- angular-cli.../core'; // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定,不然会报错 import { FormsModule } from '@angular/forms';...特殊之处后面解释 [(target)]: 双向数据绑定,视图和数据源同步改动。。一般用于表单比较多。...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index 动态渲染(*ngIf) *ngIf="item"...---- 总结 这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说; 路由的配置及懒加载这些, 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。

    6.2K20

    一步一步学Vue (一)

    dom中,我不会说好神奇,因为我熟悉angular,我知道angular也是简单一个指令就可以做到,这里和angular使用上做一个类比,可以看到,在当前的代码中创建Vue对象的时候,传递的参数{el...中的scope,scope对象angular中是连接controller和view的桥梁,那么data对象就是代理vue对象数据和template的桥梁。...2、TODO LIST 由于有angular的经验,不会按部就班的过vue的文档,那样也没什么意思,这里以todolist作为Hello world的延伸,由于和angular类似的数据驱动的特点,我们不需要关注如何操作...中不同,angular中事件也是绑定在$scope对象中的,只不过值是function而已,vue中,对事件绑定和属性绑定进行了区分,分别使用data和methods代理,这样也逻辑上更清晰,指责上更单一...的使用经验,这里增加的方式有些区别,angularng-repeat中有内置变量index,所以事件处理上,我们就会通过index作为数组项索引,事件绑定也会类似ng-click="remove(

    3.6K20

    国庆节前端技术栈充实计划(8):我使用 AngularJS 和 ReactJS 的经验

    我们使用 AJAX 请求从后端获取数据使用 JavaScript 渲染新的 UI 元素然后将它插入到 DOM 中去,用户交互通过事件绑定和回调函数来实现。...然而,当一个应用的复杂度大幅度增加,一堆问题开始出现得比预期的更频繁:你可能数据更新了,但漏掉了更新某一处展现,你通过 Ajax 获取更新了内容,但没有绑定事件,还有另外一些问题,把这些全部列出来会是个很长的清单...这些问题让你的代码逐渐变得不可维护,尤其是多人协作团队开发的项目中。这时候,你就需要使用前端框架来为你解决多人协作开发的种种问题了。 ? 1....最初使用 React 让人感觉棒极了,我们可以用 JavaScript 来做一切:展现一段 HTML,通过遍历数组渲染一个列表,优雅地改变一个变量的值,然后看着它通过 props 传播到各处,更新更新的内容到可复用组件里...当我表单中遇到一个由于 ngIf directive 创建一个新的子域而导致的问题时,我处理起来还是很费劲。

    1.4K30
    领券