Angular动态表单常规设计（一）

由浅入深理解动态表单的一般使用

当表单结构类似，频繁地使用响应式表单或许是一件增加工作量地事情，除了将模板进行合理地封装，表单模型也要能够灵活地构造，此时推荐使用动态表单。

先理解再优化

动态表单模板中，value、label均动态化，表单字段也是动态绑定，比较基础地模型是一个数组循环与模板绑定处理；生成一个formGroup，会根据不同地类型区分，此时不包含重复项。
数据模型数据：

this.base = [
      {
        key: 'userName',
        label: '姓名',
        value: null,
        validators: [Validators.required]
      },
      {
        key: 'age',
        label: '年龄',
        value: null,
        validators: [Validators.required]
      }
    ];

form生成：

this.form = this.toFormGroup(this.base);
toFormGroup(options: any[]) {
    const group = {};
    options.forEach(item => {
      group[item.key] = new FormControl(item.value, item.validators);
    });
    return new FormGroup(group);
  }

模板

    

      
        

          

            
              {{item.label}}
              
                
              
            
          
        
      
    
   

优化

模板组件化，方法服务化
basic-form

  
    

      

        
          {{item.label}}
          
            
          
        
      
    
  

我们需要实现一个根据不同学龄阶段的学生生成不同的某个申请表单，这时表单需要动态化处理,
修改代码：
view.component.html

  

    
      小学
      初中
      高中
    
  


  

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray, FormControl, ValidationErrors, ValidatorFn } from '@angular/forms';
import { FormService } from '../share/form.service';
interface FormFieldObject {
  key: string;
  label: string;
  value: any;
  placeholder: string;
  validators: ValidatorFn[];
}
@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.scss']
})

export class ViewComponent implements OnInit, AfterViewInit {

  constructor(
    private formService: FormService
  ) { }
  form: FormGroup;
  formData: FormFieldObject[];
  base: FormFieldObject[];
  grade = 'junior';
  ngOnInit() {
    this.base = [
      {
        key: 'userName',
        label: '姓名',
        value: null,
        placeholder: 'Enter Your Name',
        validators: [Validators.required]
      },
      {
        key: 'age',
        label: '年龄',
        value: null,
        placeholder: 'Enter Your Age',
        validators: [Validators.required]
      }
    ];
    this.formData = [...this.base];
    this.form = this.formService.createForm(this.formData);
  }
  gradeChange(event) {
    this.base = [
      {
        key: 'userName',
        label: '姓名',
        value: null,
        placeholder: 'Enter Your Name',
        validators: [Validators.required]
      },
      {
        key: 'age',
        label: '年龄',
        value: null,
        placeholder: 'Enter Your Age',
        validators: [Validators.required]
      }
    ];
    if (event === 'middle') {
      const pre = [
        {
          key: 'junior',
          label: '小学教育',
          value: null,
          placeholder: 'Enter Your junior school',
          validators: [Validators.required]
        }
      ];
      this.formData = [...this.base, ...pre];
      this.form = this.formService.createForm(this.formData);
    } else if (event === 'junior') {
      this.formData = [...this.base];
      this.form = this.formService.createForm(this.formData);
    } else {
      const pre = [
        {
          key: 'junior',
          label: '小学教育',
          value: null,
          placeholder: 'Enter Your junior school',
          validators: [Validators.required]
        },
        {
          key: 'middle',
          label: '初中教育',
          value: null,
          placeholder: 'Enter Your middle school',
          validators: [Validators.required]
        }
      ];
      this.formData = [...this.base, ...pre];
      this.form = this.formService.createForm(this.formData);
    }
  }
  ngAfterViewInit() {

  }


}

import { Injectable } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class FormService {

  constructor() { }
  createForm(arrays: any[]) {
    const group = {};
    arrays.forEach(item => {
      group[item.key] = new FormControl(item.value, item.validators);
    });
    return new FormGroup(group);
  }
}

模板组件

import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  // tslint:disable-next-line: component-selector
  selector: 'basic-form',
  templateUrl: './basic-form.component.html',
  styleUrls: ['./basic-form.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BasicFormComponent implements OnInit {

  @Input() form: FormGroup;
  @Input() data: any[];
  constructor() { }

  ngOnInit() {
  }
  submit() {
    console.log(this.form.valid);
   }

}

将表单控件的value、字段、placeholder文本，以及简单的验证器均动态化，保证了多条件下均可以提交和验证表单。