Angular 解决 FormGroup 和 FormArray 嵌套问题

在以往动态处理 FormGroup 和 FormArray 嵌套表单时，通常要写一大堆的长长的形如这样的代码:

    

      

        

          
        

            error...
        
        
      
    
  

这其中多了一些乱七八糟的东西，如：formArrayName,formGroupName,formControlName,form.get(,...,) ，看到或写这样的代码感觉要晕死过去...
为了解决这样的问题，想出了下面的这个解决方案

解决方案

import { Directive, TemplateRef, Input, QueryList, ViewContainerRef, Component, ContentChildren } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Directive({
  selector: '[ctrl]',
})
export class Ctrl {
  constructor(public view: ViewContainerRef, public template: TemplateRef) {}
}

@Component({
  selector: 'group',
  template: ``
})
export class SeeFormGroupComponent {
  @Input() group: FormGroup | FormControl | any;
  @ContentChildren(Ctrl) ctrl: QueryList;
  get fields() {
    if (this.group instanceof FormGroup) {
      return this.group.controls;
    }

    if (this.group instanceof FormControl) {
      return this.group;
    }

    return new FormControl(this.group);
  }

  ngAfterContentInit() {
    if (this.group) {
      const ctrls = this.ctrl.toArray();
      setTimeout(()=>{
        ctrls.forEach(r => {
          r.view.createEmbeddedView(r.template, { $implicit: this.fields });
        })
      },0);
    }
  }
}

使用

        

            
             
            

              用户名不能为空!
            
        
      

终于不用看到，形如：formArrayName,formGroupName,formControlName,form.get(,...,) 这些乱七八糟的东西了

天之骄子 深圳 2018.12.26