Angular 动态添加表单和排序

简介

用户需要批量添加数据且数据内容和多少不确定时，需要动态控制表单数量。

效果如下：

效果.gif

使用插件

1. NG-ZORRO

代码

html 文件

    

        

        
            
            
            
        
        
        

        
            
            
                
                
                
            
            
        
        
        

        
            
            
            
        
        
        

        
            
            
                
                
                
            
            
        
        
        

        
            
            
            
        
        
        

        
            
            {{ 'Follow
                Origin' | translate }}
            
            
            
            
        
        
    

注意：input的 name 不能写死。如果写死的话添加新的 input 的时候无法赋值。

ts 文件

import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
import { I18NService } from '@core/i18n/i18n.service';

@Component({
  selector: 'app-edit-cdn',
  templateUrl: './edit.component.html',
  styles: []
})
export class EditCdnComponent implements OnInit {
  controlArray: Array<{ id: number }> = [];

  isVisible: boolean;

  constructor(
    public i18n: I18NService,
  ) {
    this.isVisible = false;
  }

  showModal(): void {
    this.isVisible = true;
  }

  handleCancel(): void {
    this.isVisible = false;
  }

  handleOk(validataForm) {
    console.log(this.controlArray);
  }

  addField(e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    const id = (this.controlArray.length > 0) ? this.controlArray[this.controlArray.length - 1].id + 1 : 0;

    const control = {
      id,
      dir: '',
      operation: 'cache',
      duration: 1,
      time_unit: 'mins',
      file_type: '',
      check_origin: true
    };
    this.controlArray.push(control);
  }

  removeField(i: { id: number }, e: MouseEvent): void {
    e.preventDefault();
    if (this.controlArray.length > 1) {
      const index = this.controlArray.indexOf(i);
      this.controlArray.splice(index, 1);
    }
  }

  upField(i: { id: number }, e: MouseEvent): void {
    const newControlArray = [];
    let pre;
    if (this.controlArray.length > 1) {
      for (const control of this.controlArray) {
        pre = '';
        if (control === i) {
          pre = newControlArray.pop();
          control['id'] = control['id'] - 1;
          newControlArray.push(control);
          pre['id'] = pre['id'] + 1;
          newControlArray.push(pre);
        } else {
          newControlArray.push(control);
        }
      }
      this.controlArray = newControlArray;
    }
  }

  downField(i: { id: number }, e: MouseEvent): void {
    const newControlArray = [];
    let next = null;
    if (this.controlArray.length > 1) {
      for (const control of this.controlArray) {
        if (control === i) {
          next = control;
        } else {
          if (next !== null) {
            control['id'] = control['id'] - 1;
            newControlArray.push(control);
            next['id'] = next['id'] + 1;
            newControlArray.push(next);
            next = null;
          } else {
            newControlArray.push(control);
          }
        }
      }
    }
    this.controlArray = newControlArray;
  }

  ngOnInit() {

  }
}

1. 需要注意51~60行，其中 id 是动态表单必须字段。为了让 input 中的 name 不重复，我定义input的name 是 name+id 组的字符串，其他字段是 input 的双向绑定定义的值。这样才可以在controlArray中获取用户填写后的结果。
2. 在upField和downField 函数中对 id 的操作是为了上传的时候看着比较舒服，不改也没什么影响。