'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. javascript脚本从载入浏览器到显示执行的过程解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 简单的代码: <script type="text/javascript" src="xxx.js" ...

  2. Arch Linux下配置Samba

    本文记录笔者配置Samba的过程,供用于自用. sudo pacman -S samba sudo vim /etc/samba/smb.conf 添加以下内容 [global]    dns pro ...

  3. 13.constexpr

    #include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...

  4. Logstash Json 过滤器插件

    1. Json Filter 功能概述 这是一个JSON解析过滤器.它接受一个包含JSON的现有字段,并将其扩展为Logstash事件中的实际数据结构. 默认情况下,它将把解析过的JSON放在Logs ...

  5. GIT,SVN,CVS的区别比较

    Git .CVS.SVN比较 项目源代码的版本管理工具中,比较常用的主要有:CVS.SVN.Git 和 Mercurial  (其中,关于SVN,请参见博客:SVN常用命令 和 SVN服务器配置) 目 ...

  6. java的23中设计模式

    一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接 ...

  7. query中prop()方法和attr()方法的区别

    query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop ...

  8. jquery设置attr属性值

    1.返回属性值 $(selector).attr(attribute); 2.设置属性值 $(selector).attr(attribute,value); 3.设置多个属性值 $(selector ...

  9. netty reactor线程模型分析

    netty4线程模型 ServerBootstrap http示例 // Configure the server. EventLoopGroup bossGroup = new EpollEvent ...

  10. iOS_02_什么是ios开发

    什么是ios开发? * 已知:ios是iphone,ipad等手持设备操作系统. * ios开发就是开发运行在ios系统上的应用或者游戏软件,比如手机QQ,微博或者游戏,说白了,就是开发手机软件:当然 ...