zoukankan      html  css  js  c++  java
  • [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'

  • 相关阅读:
    CSS3 03. 3D变换、坐标系、透视perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可见、动画animation、@keyfarmes、多列布局
    CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换(缩放、位移、旋转、倾斜)
    CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
    HTML5 01. 布局、语义化标签、智能化表单、表单元素/标签/属性/事件、多媒体、类操作、自定义属性
    webstorm 突然不能用了?解决办法~
    jQuery
    jQuery
    jQuery
    JS-特效 ~ 05. 缓动框架兼容封装/回掉函数/兼容透明度/层级、旋转轮播图、正则表达式、验证表单注册账号、
    百问网WIFI模块驱动
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6583739.html
Copyright © 2011-2022 走看看