[Angular] Working with FormArray
'FormArray' can work with array of 'FormGroup' or 'FormControl'.
form = new FormGroup({
stock: new FormArray([
new FormGroup({
product_id: new FormControl(1),
quantity: new FormControl(10)
}),
new FormGroup({
product_id: new FormControl(12),
quantity: new FormControl(90)
}),
])
});
So for Javascript, we have a 'form=new FormGroup()', inside formGoup, we have a 'stock' formArray with multi formGroup inside.
In the html, we use component approach:
<stock-products
(removed)="removeStock($event)"
[parent]="form">
</stock-products>
We create a custom component.
Inside the component:
import { Component, Input } from '@angular/core';
import { FormGroup, FormArray } from '@angular/forms'; @Component({
selector: 'stock-products',
styleUrls: ['stock-products.component.scss'],
template: `
<div class="stock-product" [formGroup]="parent">
<div formArrayName="stock">
<div
*ngFor="let item of stocks; let i = index;"> <div class="stock-product__content" [formGroupName]="i">
<div class="stock-product__name">
{{ item.value.product_id }}
</div>
<input
type="number"
step="10"
min="10"
max="1000"
formControlName="quantity">
<button type="button">
Remove
</button>
</div> </div>
</div>
</div>
`
})
export class StockProductsComponent {
@Input()
parent: FormGroup; get stocks() {
return (this.parent.get('stock') as FormArray).controls;
} }
First:
<div class="stock-product" [formGroup]="parent">
Tells what want to bind 'form' object passing down from the parent component.
Then to keep the same structure, we add:
<div formArrayName="stock">
Because "stock" is a FormArray.
Inside the Form array, we loop thought each form group:
<div class="stock-product__content" [formGroupName]="i">
We use the index as key to bind 'formGroupName', it actually feeling the same as work with JS array, accessing by the index.
Notice how we get 'stock' from 'form':
get stocks() {
return (this.parent.get('stock') as FormArray).controls;
}
Using
(this.parent.get('stock') as FormArray)
just to tell Typescrpt, this is a FormArray type.
The same as :
get stocks() {
const ary = <FormArray>this.parent.get('stock');
return ary.controls;
}
To add or remove from the FormArray: we have 'push' and 'removeAt' methods
addStock(stock) {
const control = this.form.get('stock') as FormArray;
control.push(this.createStock(stock));
} removeStock({ group, index }: { group: FormGroup, index: number }) {
const control = this.form.get('stock') as FormArray;
control.removeAt(index);
}
[Angular] Working with FormArray的更多相关文章
- [Angular] Update FormArray with patchValue
Currently, patchValue doesn't support update FormArray. The workarround is you need to empty the for ...
- Angular之响应式表单 ( Reactive Forms )
项目结构 一 首页 ( index.html ) <!doctype html> <html lang="en"> <head> <met ...
- Angular使用总结 --- 模型驱动表单
模型驱动表单 之前有篇博文总结了 模版驱动表单 , 以及 模版驱动表单的自定义校验 , 本篇总结下模型驱动表单. 与模版驱动表单是不同的编程思路,偏向于数据模型.先在组件中建立表单控件的对象树,再绑定 ...
- Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点
前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先须要操作表单的模块引入这两个模块. import { FormsModule, ReactiveFormsModule } ...
- Angular : 响应式编程, 组件间通信, 表单
Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...
- [Angular] Component architecture and Reactive Forms
It it recommeded that when deals with form component, we can create a container component to hold st ...
- [Angular] Test Container component with async provider
The main idea for testing contianer component is to make sure it setup everythings correctlly. Call ...
- 表单-angular
模板表单: <form #myform="ngForm" (ngSubmit)="onsubmit(myform.value)" > <div ...
- Angular表单 (一)表单简介
Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
随机推荐
- Event Serializers官网剖析(博主推荐)
不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...
- 二叉树的递归插入【Java实现】
C++中由于有指针的存在,可以让二叉树节点指针的指针作为插入函数的实参,在函数体内通过*操作实现对真实节点指针.节点左孩子指针.节点右孩子指针的改变,这样很容易使用递归将大树问题转化到小树问题.但在J ...
- HTTP请求报文、响应报文
HTTP请求报文 HTTP请求报文由3部分组成(请求行+请求头+请求体): 请求行:①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE.HEAD.OPTIONS.PUT. ...
- 12、python单步调试工具pdb
pdb 第4种方式是启动Python的调试器pdb,让程序以单步方式运行,可以随时查看运行状态.我们先准备好程序: # err.py s = '0' n = int(s) print(10 / n) ...
- Docker---(3)Docker常用命令
原文:Docker---(3)Docker常用命令 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_3 ...
- Spring-data-redis:特性与实例--转载
原文地址:http://shift-alt-ctrl.iteye.com/blog/1886831 Spring-data-redis为spring-data模块中对redis的支持部分,简称为“SD ...
- 关于js盒子模型的知识梳理
盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...
- Windows 7 Ultimate with SP1(x64) MSDN 官方简体中文旗舰版原版
Windows 7 Ultimate(旗舰版)64位功能齐全,所有其他版本所具有的高级功能它都有!它是最好的Windows 7操作系统.旗舰版很受网友欢迎,下载速度飞快. MSDN 我告诉你下载官网: ...
- Testfan软件测试社区
1. http://ask.testfan.cn/article/902 Appium 服务端安装-windows2. http://ask.testfan.cn/article/1078 最新 ...
- 9.12 Binder系统_Java实现_内部机制_Client端
Java实现中client端的RPC层(java实现)如何通过JNI来调用IPC层(C++实现)发送数据 TestServer通过addService向Service_manager注册的时候Test ...