'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的更多相关文章

  1. [Angular] Update FormArray with patchValue

    Currently, patchValue doesn't support update FormArray. The workarround is you need to empty the for ...

  2. Angular之响应式表单 ( Reactive Forms )

    项目结构 一 首页 ( index.html ) <!doctype html> <html lang="en"> <head> <met ...

  3. Angular使用总结 --- 模型驱动表单

    模型驱动表单 之前有篇博文总结了 模版驱动表单 , 以及 模版驱动表单的自定义校验 , 本篇总结下模型驱动表单. 与模版驱动表单是不同的编程思路,偏向于数据模型.先在组件中建立表单控件的对象树,再绑定 ...

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

    前言 表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式. 首先须要操作表单的模块引入这两个模块. import { FormsModule, ReactiveFormsModule } ...

  5. Angular : 响应式编程, 组件间通信, 表单

    Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...

  6. [Angular] Component architecture and Reactive Forms

    It it recommeded that when deals with form component, we can create a container component to hold st ...

  7. [Angular] Test Container component with async provider

    The main idea for testing contianer component is to make sure it setup everythings correctlly. Call ...

  8. 表单-angular

    模板表单: <form #myform="ngForm" (ngSubmit)="onsubmit(myform.value)" > <div ...

  9. Angular表单 (一)表单简介

    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...

随机推荐

  1. Event Serializers官网剖析(博主推荐)

    不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...

  2. 二叉树的递归插入【Java实现】

    C++中由于有指针的存在,可以让二叉树节点指针的指针作为插入函数的实参,在函数体内通过*操作实现对真实节点指针.节点左孩子指针.节点右孩子指针的改变,这样很容易使用递归将大树问题转化到小树问题.但在J ...

  3. HTTP请求报文、响应报文

    HTTP请求报文 HTTP请求报文由3部分组成(请求行+请求头+请求体): 请求行:①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE.HEAD.OPTIONS.PUT. ...

  4. 12、python单步调试工具pdb

    pdb 第4种方式是启动Python的调试器pdb,让程序以单步方式运行,可以随时查看运行状态.我们先准备好程序: # err.py s = '0' n = int(s) print(10 / n) ...

  5. Docker---(3)Docker常用命令

    原文:Docker---(3)Docker常用命令 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_3 ...

  6. Spring-data-redis:特性与实例--转载

    原文地址:http://shift-alt-ctrl.iteye.com/blog/1886831 Spring-data-redis为spring-data模块中对redis的支持部分,简称为“SD ...

  7. 关于js盒子模型的知识梳理

    盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...

  8. Windows 7 Ultimate with SP1(x64) MSDN 官方简体中文旗舰版原版

    Windows 7 Ultimate(旗舰版)64位功能齐全,所有其他版本所具有的高级功能它都有!它是最好的Windows 7操作系统.旗舰版很受网友欢迎,下载速度飞快. MSDN 我告诉你下载官网: ...

  9. Testfan软件测试社区

    1.  http://ask.testfan.cn/article/902  Appium 服务端安装-windows2.  http://ask.testfan.cn/article/1078 最新 ...

  10. 9.12 Binder系统_Java实现_内部机制_Client端

    Java实现中client端的RPC层(java实现)如何通过JNI来调用IPC层(C++实现)发送数据 TestServer通过addService向Service_manager注册的时候Test ...