[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提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
随机推荐
- javascript脚本从载入浏览器到显示执行的过程解析
版权声明:本文为博主原创文章,未经博主允许不得转载. 简单的代码: <script type="text/javascript" src="xxx.js" ...
- Arch Linux下配置Samba
本文记录笔者配置Samba的过程,供用于自用. sudo pacman -S samba sudo vim /etc/samba/smb.conf 添加以下内容 [global] dns pro ...
- 13.constexpr
#include <iostream> using namespace std; //声明返回值为常量表达式 constexpr int get() { ; return num; } v ...
- Logstash Json 过滤器插件
1. Json Filter 功能概述 这是一个JSON解析过滤器.它接受一个包含JSON的现有字段,并将其扩展为Logstash事件中的实际数据结构. 默认情况下,它将把解析过的JSON放在Logs ...
- GIT,SVN,CVS的区别比较
Git .CVS.SVN比较 项目源代码的版本管理工具中,比较常用的主要有:CVS.SVN.Git 和 Mercurial (其中,关于SVN,请参见博客:SVN常用命令 和 SVN服务器配置) 目 ...
- java的23中设计模式
一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥接 ...
- query中prop()方法和attr()方法的区别
query1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 官方例举的例子感觉和attr()差不多,也不知道有什么区别,既然有了prop ...
- jquery设置attr属性值
1.返回属性值 $(selector).attr(attribute); 2.设置属性值 $(selector).attr(attribute,value); 3.设置多个属性值 $(selector ...
- netty reactor线程模型分析
netty4线程模型 ServerBootstrap http示例 // Configure the server. EventLoopGroup bossGroup = new EpollEvent ...
- iOS_02_什么是ios开发
什么是ios开发? * 已知:ios是iphone,ipad等手持设备操作系统. * ios开发就是开发运行在ios系统上的应用或者游戏软件,比如手机QQ,微博或者游戏,说白了,就是开发手机软件:当然 ...