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

Angular 6:如何在保存事件时绑定formArray值?

在Angular 6中,要在保存事件时绑定formArray的值,可以按照以下步骤进行操作:

  1. 首先,在组件的HTML模板中,使用formArrayName指令将formArray与模板中的元素进行绑定。例如,如果formArray的名称为myFormArray,可以在模板中使用以下代码:
代码语言:txt
复制
<form [formGroup]="myForm">
  <div formArrayName="myFormArray">
    <div *ngFor="let control of myFormArray.controls; let i=index">
      <input type="text" [formControlName]="i">
    </div>
  </div>
</form>
  1. 在组件的Typescript文件中,首先导入相关的表单模块和其他必要的依赖项。然后,在组件类中创建一个formArray,并将其与表单进行绑定。例如:
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      myFormArray: this.formBuilder.array([])
    });
  }

  onSave() {
    // 获取formArray的值
    const formArrayValue = this.myForm.get('myFormArray').value;
    console.log(formArrayValue);
  }
}
  1. 在保存事件的处理函数中,通过调用get方法获取formArray的值。然后,你可以对这些值进行进一步的处理,例如保存到数据库或发送到服务器。

以上就是在Angular 6中如何在保存事件时绑定formArray值的步骤。请注意,这只是一个简单的示例,实际应用中可能会有更复杂的逻辑和操作。对于更多关于Angular的信息,你可以参考腾讯云的Angular产品介绍页面:Angular产品介绍

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

相关·内容

Angular系列教程-第四节

1.表单 Angular 提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单。...两者都从视图中捕获用户输入事件、验证用户输入、创建表单模型、修改数据模型,并提供跟踪这些更改的途径 使用’@angular/forms’库中的FormGroup, FormControl,FormArray...minLength 此验证器要求控件的长度大于等于所指定的最小长度。当使用 HTML5 的 minlength 属性,此验证器也会生效。...maxLength 此验证器要求控件的长度小于等于所指定的最大长度。当使用 HTML5 的 maxLength 属性,此验证器也会生效。 pattern 此验证器要求控件的匹配某个正则表达式。...结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令,比如ngfor、ngif 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令,比如ngstyle 6.属性型指令 6.1

2.8K50

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

--#UserName 是局部变量,若是有ngmodel,拿到的就是一个响应对象,若是非ngmodel绑定的,则是dom元素代码--> <!...; 在Submit()函数内,在点击提交的时候对整个表单一一去判断,传统方式基本这样 每个控件输入的时候对应去触发对应的事件做校验,比如[ngModelChange]来处理双向绑定校验 ---- 数据驱动...(6)] // Validators可选参数 // 1. required :必须验证的,返回布尔 // 2. minLength : 最小长度 // 3. maxLenght: 最大长度...// 4. nullValidator : 空判断 // 5. coompose :多重判断组合,下面有写法 // 6. pattern是支持正则模式,正则谨记转义转义转义 constructor

3.8K20

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

一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件类中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...而响应式表单在表单数据发生变更,FormControl 实例会返回一个新的数据模型,而不是直接修改原来的数据模型 4.2、模板驱动表单 通过使用表单的专属指令(例如 ngModel 进行双向数据绑定)...将数据和一些对于用户的行为约束(某个字段必须填啊、某个字段长度超过了长度限制啊)绑定到组件的模板中,从而完成与用户的交互 4.2.1、模板驱动表单的双向数据绑定 在根模块中引入 FormsModule...在数据验证失败的情况下,对于系统来说,表单是不允许提交的,因此可以将提交事件绑定到表单的 ngSubmit 事件属性上,通过模板引用变量的形式,在提交按钮处进行数据有效性判断,当无效,禁用表单的提交按钮

18.9K20

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。...一部分事件适用于组件/指令,而少数事件只适用于组件。 ngOnChanges:当Angular设置其接收当前和上一个对象的数据绑定属性响应。...什么是事件发射器?它是如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...这通常用在setter中,当类中的被更改完成。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...v=bci-Z6nURgE 6.  什么是延迟加载?如何在Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。

17.3K80

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

主要的Angular库是angular,大多数app模块导入如下: import 'package:angular/angular.dart'; Angular包有其他重要的库,angular.security...当用户点击英雄的名字,(click)事件绑定调用组件的selectHero方法。 双向数据绑定是一个重要的第四种形式,它使用ngModel指令将属性和事件绑定在一个符号中。...,与属性绑定一样,数据属性将从组件输入到输入框中。...用户的更改也会返回到组件,将属性重置为最新,就像事件绑定一样。 Angular在每个JavaScript事件循环中处理所有数据绑定,从应用程序组件树的根到所有子组件。 ?...实现双向数据绑定的ngModel指令是一个属性指令的例子。 ngModel通过设置其显示属性并响应更改事件来修改现有元素(通常是)的行为。

7.9K30

angular面试题及答案_angular面试

生命周期钩子 生命周期的顺序,见下图: ngOnChanges:当组件数据绑定的输入属性发生变化是触发,该方法接收一个SimpleChanges对象,包括当前和上一个属性。...双向数据绑定的原理 data => view:数据绑定,模板语法 [ ] view => data: 事件绑定,模板语法() angular的双向数据绑定就是 数据绑定 + 事件绑定 ,模板语法 [...有几种数据绑定方式? 属性绑定 [ ] 事件绑定() 双向数据绑定 [()] 12. 单页面应用和传统的web技术有什么不同?...当observable或promise返回data,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑的应用程序。 27. 使用Angular的好处 可以添加自定义的directive. 优秀的社区支持。 客户端和服务器的通讯非常便利。

10.8K120

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

角表达式是类似于JavaScript的代码段,通常放在诸如{{expression}}之类的绑定中。这些表达式用于将应用程序数据绑定到HTML 语法:{{expression}} 6....在Angular中,数据绑定有四种形式: 字符串插 属性绑定 事件绑定 双向数据绑定 13.在Angular中使用过滤器的目的是什么?...25.什么是Angular模块? 所有Angular应用程序都是模块化的,并遵循称为NgModules的模块化系统。这些容器保存着专门用于应用程序域,工作流或一组紧密相关的功能的内聚代码块。...Angular中的事件是什么? Angular中的事件是特定的指令,可帮助自定义各种DOM事件的行为。...Karma Angular Mocks Mocha Browserify Sion 38.如何在Angular中创建服务?

41.1K51

angular基础面试题_java web面试题

angular 生命周期的顺序 ngOnChanges: Angular 设置或重新设置数据绑定的输入属性响应。...在 ngOnInit() 之前以及所绑定的一个或多个输入属性的发生变化时都会调用 ngOnInit: 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。...父子组件传 子组件暴露一个 EventEmitter 属性,当事件发生,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生作出回应。...(仅限本组件) None (全局样式)Emulated (只进不出,全局样式能进来,组件样式出不去) angular 数据双向绑定原理 原理:页面中每绑定一个数据或者事件,就会向watch队列中加入一条...watch,当浏览器接受到可以被angular context(当事件触发,调用apply进入angular context)处理的事件,就会触发digest循环,它会遍历每一个watch检查其属性和是否发生改变

13K50

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

事件发生,处理程序执行模板语句。 模板语句通常包含一个接收器,它响应事件执行一个动作,例如将HTML控件的存储到模型中。...当用户单击按钮Angular将$event分配给AppComponent.fontSizePx。 显然,与单独的属性和事件绑定相比,双向绑定语法相当方便。...使用HTML表单元素(和)的双向绑定会很方便。 但是,没有原生HTML元素遵循x和xChange事件模式。...NgSwitchCase在其绑定等于交换机将其元素添加到DOM。 当没有选择NgSwitchCase,NgSwitchDefault将其元素添加到DOM。...input属性通常接收数据。 Output属性公开事件生成器,Stream对象。 术语input和Output反映了目标指令的视角。 ?

29.9K20

vue响应式原理(数据双向绑定的原理)

最底层,是核心的“数据层”:保存数据 3....Vue实现数据双向绑定的原理: new Vue一个实例对象a,其中有一个属性a.b,那么在实例化的过程中,通过Object.defineProperty()会对a.b添加getter和setter,同时...任何时候如果javascript对象或者一个HTML输入字段被侦测到发生变化,将代理事件变成发布者-订阅者模式,这会反过来变化广播,并传播到所有绑定的javascript对象以及DOM元素上。...脏检查(angular.js) angular.js是通过脏检测的方式,对比数据是否有变更,从而决定是否更新视图。最简单的方式就是通过setInterval()定时轮询检测数据变动。...angular.js只有在指定的事件触发,进入脏检测,大致如下: - DOM事件,譬如用户输入文本,点击按钮等(ng-click) - XHR响应事件($http) -

2.6K40

AngularDart4.0 指南- 表单 顶

一路上你将学习如何: 用组件和模板构建一个Angular表单。 使用ngModel创建读取和写入输入控制的双向数据绑定。 跟踪状态变化和表单控件的有效性。...显示数据教导属性绑定。 用户输入显示如何使用事件绑定监听DOM事件以及如何使用显示的值更新组件属性。 现在您需要同时显示,聆听和提取。...valid反映了控制的有效性。 样式控件 有效的控制属性是最有趣的,因为当一个控制无效,你想发送一个强烈的视觉信号。...您将看到表格中显示的英雄模型(只读)。 ? 该视图包含一个编辑按钮,其单击事件绑定将清除提交的标志。 当您单击编辑按钮,该表消失,并且可编辑的表单重新出现。...表单提交,通过ngSubmit事件绑定处理。 模板引用变量,heroForm和name。 双向数据绑定([(ngModel)])。 用于验证和表单元素更改跟踪的NgControl 指令。

17.4K30

前端人员该怎么面试 经典Angular面试题有哪些

当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它。...Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要执行操作。构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。...#FormatImgID_0# 2、事件发射器如何在Angular 2中工作的? Angular 2不具有双向digest cycle,这是与Angular 1不同的。...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑的应用程序。 4、什么是Shadow DOM?它如何帮助Angular 2更好地执行?...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

4.1K80

深入学习SAP UI5框架代码系列之七:控件数据绑定的三种模式 - One Way, Two Way和OneTime实现原理比较

Semantic事件 (4) SAP UI5控件元数据的元数据实现 (5) SAP UI5控件的实例数据修改和读取逻辑 (6) SAP UI5控件数据绑定的实现原理 (7) SAP UI5控件数据绑定的三种模式...Angular这三种绑定方式的使用语法如下图所示: ? 但咱们今天的文章不会阐述Angular的数据绑定细节,而是继续聚焦在SAP UI5上。...奥妙就在下图3379行代码的IF分支里:在SAP UI5控件调用bindProperty方法把控件属性绑定到模型字段,如果当前绑定模式为OneTime,则取消控件针对模型change事件的监听函数注册...如此一来,不论接下来模型字段的如何变化,该变化的通过change事件进行广播,但UI5控件再也不会收到该事件了,因而控件属性也不会再刷新。 ?...Semantic事件 (4) SAP UI5控件元数据的元数据实现 (5) SAP UI5控件的实例数据修改和读取逻辑 (6) SAP UI5控件数据绑定的实现原理 (7) SAP UI5控件数据绑定的三种模式

85810

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

控件每次更新传给回调函数的,L52 和 L89);使用 registerOnTouched 方法来注册用户和控件交互触发的回调(译者注:你可能会参考 L95)。...formControl 指令,在其自身实例化时,会调用 setUpControl() 函数给同样绑定到 input的 DefaultValueAccessor 指令做好安装工作, L85,这样 formControl...组件封装器 由于 Angular 为所有默认原生控件提供了控件访问器,所以在封装第三方插件或组件,需要写一个新的控件访问器。...,一旦 slidestop 事件被触发了,就可以使用输出事件发射器 valueChanges 通知父组件。...在registerOnChange 里我们简单保存了对回调函数 fn 的引用,回调函数是由 formControl 指令传入的(译者注:参考 L85),只要每次 slider 组件发生改变,就会触发这个回调函数

3.7K20

Angular @HostListener 装饰器的使用笔记

angular 中,通过不同的方式检测点击。 由于 click 是一个事件,因此在组件内部它是通过简单的事件绑定来检测的。...在 angular 中,它是一个装饰器,有助于捕获 DOM 内发生的任何类型的事件,并为开发人员提供基于该事件执行任何操作的灵活性。...(2) args:这些是在事件发生传递给处理程序方法的参数集。 它以列表格式输入。 (3) handlen_name:这里是事件触发时调用的方法定义。 它由 HostListener 自动调用。...示例:在组件内绑定单击 为了在组件内绑定单击事件,将 hostListener 的 eventName 维护成 “click”。...这显示了如何在 GeeksComponent 内捕获组件外部的点击。

2.2K20
领券