[Angular] Reactive Form -- FormControl & formControlName, FormGroup, formGroup & formGroupName
First time dealing with Reactive form might be a little bit hard to understand.
I have used Angular-formly for AngularJS bofore, what it does is using Javascript to define form's template, data and validations. In HTML, it is just a simple directive with some bindings.
<form> <angular-formly model="$ctrl.model" options="$ctrl.options" form="$ctrl.form" fields="$ctrl.fields"></angular-formly> </form>
So what is the main difference between Angular Formly and Reactive Form for Angular (v >= 2.0)?
Well, the main difference is that "Reactive form return the template part to the html, only take care of data and validations". So what it means is that when you use Reactive form, you still need to structure what your form should looks like by using HTML. But data bindings and validations will be taken over by Angular.
So what is the benenfits by doing "return template part to the html"? Well this allows user passing custom components and bind those components to the reactive form really easily.
Of course, in Angular Formly you also able to define your custom "template", but it is not so easy, it requires you to know the Formly APIs -- how to define a custom template. But still Angular Formly is really good libaray for AngularJS to deal with complex form logic, a much cleaner and nicer way than control all the stuffs (template, error messages, validations...) by html.
So let's take an example first before explain some details stuff:
import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; @Component({ ... template: ` <div class="stock-inventory"> <form [formGroup]="form"> <div formGroupName="store"> <input type="text" placeholder="Branch ID" formControlName="branch"> <input type="text" placeholder="Manager Code" formControlName="code"> </div> </form> </div> ` }) export class StockInventoryComponent { form = new FormGroup({ store: new FormGroup({ branch: new FormControl('B182'), code: new FormControl('1234') }) }) }
In the html, we have '[formGroup]', 'formGroupName', 'formControlName'.
The structure is like:
[formGroup]="form"
----formGroupName="store"
--------formControlName="branch"
--------formControlName="code"
In the Javascript, we define:
form = new FormGroup({ store: new FormGroup({ branch: new FormControl('B182'), code: new FormControl('1234') }) })
The structure is like:
FormGroup="form"
----FormGroup="store"
--------FormControl="branch"
--------FormControl="code"
So you can find that the html and JS code structure is the same. Just one question you may ask why:
<form [formGroup]="form">
and
<div formGroupName="store">
One use [formGroup] and the other use "formGroupName"?
Well, the answer is really simple, because "[formGroup]=form", this "form" is an JS object. "store" is just an prop on the "form" object, so ALL the props-like stuff, we add "xxxName", like "formGroupName" and "formControlName".
Now Angular is ready to take over the data bindings for the form.
Last thing I want to memtion in this post is passing "custom component" to the form.
So how to do that? Take previous example, we convert:
<div formGroupName="store"> <input type="text" placeholder="Branch ID" formControlName="branch"> <input type="text" placeholder="Manager Code" formControlName="code"> </div>
To a component.
Create a new component:
import { Component, Input } from '@angular/core'; import { FormGroup } from '@angular/forms'; @Component({ selector: 'stock-branch', styleUrls: ['stock-branch.component.scss'], template: ` <div [formGroup]="parent"> <div formGroupName="store"> <input type="text" placeholder="Branch ID" formControlName="branch"> <input type="text" placeholder="Manager Code" formControlName="code"> </div> </div> ` }) export class StockBranchComponent { @Input() parent: FormGroup; }
We copy the html to the new component, we only add a extra Input "parent". So what it is ?
import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; @Component({ ... template: ` <div class="stock-inventory"> <form [formGroup]="form"> <stock-branch [parent]="form"> </stock-branch> </form> </div> ` }) export class StockInventoryComponent { form = new FormGroup({ store: new FormGroup({ branch: new FormControl(''), code: new FormControl('') }) }) }
As you can see, we actually just pass down "form" object down to the child component. As re-structure [formGroup]-formGroupName-formControlName in the new component.
So by now, hope it is clear for you how easy it is for Reactive form binding form to custom component. And hope you already find another tips: the chain partten: '[formGroup]-->formGroupName-->formControlName'
相关文章
- 记linux输出重定向操作>&
- Spring学习笔记(二十八)——springboot单元测试&JUnit5
- 微服务(三)——Eureka服务注册与发现&Eureka集群
- SpringBoot集成WebSocket实践&总结
- Not Only SQL (三) - MongoDB Introduce & CRUD (上)
- 沐创携第一代DPU智能网卡亮相第二届SmartNIC & DPU 技术创新峰会
- 也谈VC中ModifyStyle&ModifyStyleEx无法改变控件的Style)
- SP11444 MAXOR - MAXOR & bzoj 2741 【FOTILE模拟赛】L
- React In Depth - React 源码解析 - render() & Fiber
- 华为&思科 | 数据转发过程 P6
- 一盏茶的功夫,拿捏作用域&作用域链
- 零零信安-D&D数据泄露报警日报【第43期】
- EMNLP2022 & 天津大学 | 基于Bert的无监督边界感知模型BABERT「中文序列标注」
- ECCV2022 &CVPR2022论文速递2022.8.1!
- CentOS python3 & Java 安装
- 精益产品开发 —— 精益思想 & 精益价值观
- Rainbond 结合 Jpom 实现云原生 & 本地一体化项目管理
- 关于<tbody>的一个实例,很实用。
- phpforeach使用&(与运算符)引用赋值要注意的问题
- javascript中如何处理引号编码"