[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提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...
随机推荐
- Lamp(linux+apache+mysql+php)环境搭建
Lamp(linux+apache+mysql+php)环境搭建 .安装apache2:sudo apt-get installapache2 安装完毕后.执行例如以下命令重新启动apache:sud ...
- css实现水波纹效果
1. HTML 代码: <div class="example"> <div class="dot"></div> < ...
- Web应用开发(Servlet+html+Mysql)入门小示例
在安装好eclipse并配置完安装环境.安装好tomcat的前提下: 1.新建Dynamic Web Project,选择好运行的tomcat服务器版本等:2.在WebContent下: 新建fo ...
- ACCESS数据库改名asp或asa
到把mdb改为asp或asa ACCESS数据库:把数据库后缀名改成ASP是防止ACCESS数据库被下载
- 浅析C#组件编程中的一些小细节
控件与组件的区别(Control&Component的区别) 作者:作者不详 发布日期:2011-06-30 12:08:41 控件与组件的区别(Control&Component的 ...
- 【CS Round #46 (Div. 1.5) E】Ultimate Orbs
[链接]链接 [题意] n个人从左到右站在一条直线上.每个人都有一个能力值g[i],然后每个人可以将相邻的一个人打败. 然后它的能力值能够增加相应的能力值(就是打败了的那个人的能力值). A能够打败B ...
- Eclipse导出Library
在工作中遇到开发SDK,记录下导出Library的过程. 1.导出 选中项目>属性>Android 配置Is library例如以下图: 选中项目>导出>JAR ...
- amazeui学习笔记--css(常用组件6)--图标Icon
amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...
- 【Codeforces Round #301 (Div. 2) A】 Combination Lock
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟水题 [代码] #include <bits/stdc++.h> using namespace std; cons ...
- [D3] Select DOM Elements with D3 v4
Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...