Form中可手动添加输入框，并可以删除

.w-forbid {
  background-color: #ddd;
  border: 1px dashed #ddd;
}

.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all .3s;
}

.for-del {

  width:12px;
  height:12px;

  &:hover {
    color: #108ee9;
  }
}

    <div class="dynamic-input-num">    
<input
#eleInput
    type="text"
    [ngModel]="value"
    style="display: none;"
  />
    <button *ngIf="!isView" nz-button [nzType]="‘dashed‘" [nzShape]="‘circle‘" [nzSize]="‘large‘" (click)="addField($event, eleInput)">

      </button>
  <div nz-col class="w-forbid clearfix" *ngIf="collectValue.length > 0">

    <div *ngFor="let control of collectValue;let i = index" nz-form-control nz-col [nzSpan]="8">
      <div style="width: 70%;display: inline-block;">
　　　　　　<!-- 每一项内容 -->
        <input
        #eleOneInput
        [(ngModel)]="control.controlInstance"
        (ngModelChange)="changeOne($event, control.id, eleOneInput)"
        (blur)="getChange($event, control.id, eleInput)"
        />
        <span *ngIf="isView">{{control.controlInstance}}</span>
      </div>
　　　　<!-- 删除按钮 -->
      <i class="anticon anticon-delete for-del" (click)="removeField(control,$event,eleInput)"></i>

    </div>
</div>
</div>

import { Component, OnInit, Input, ViewChild, ElementRef, EventEmitter, Output, forwardRef } from ‘@angular/core‘;
import { NG_VALUE_ACCESSOR } from ‘@angular/forms‘;
import { ControlValueAccessor } from ‘@angular/forms/src/directives‘;

const RADIO_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => DynamicInputNumComponent),
  multi: true
};

@Component({
  // tslint:disable component-selector
  selector: ‘dynamic-input-num‘,
  templateUrl: ‘./dynamic-input-num.component.html‘,
  styleUrls: [‘./dynamic-input-num.component.scss‘],
  providers: [RADIO_VALUE_ACCESSOR]
})

export class DynamicInputNumComponent implements OnInit, ControlValueAccessor {
  @Output()
  public valueChange: EventEmitter<any> = new EventEmitter();

  @Input() isView: boolean;
  public collectValue = [];

  public controlArray = [];
  private onTouchedCallback: Function = function () { };
  private onChangeCallback: Function = function () { };

  public get value() {
    return this.collectValue;
  }

  public addField(e: MouseEvent, ipt) {
    if (e) {
      e.preventDefault();
    }
    const id = (this.collectValue.length > 0) ? this.collectValue[this.collectValue.length - 1].id + 1 : 0;
    if (id > 19) {
      return;
    }
    if ( this.collectValue.length > 0 && this.collectValue[this.collectValue.length - 1].controlInstance.trim() === ‘‘) {
      return;
    }
    const control = {
      id,
      controlInstance: ‘‘
    };
    this.collectValue.push(control);

    ipt.value = this.collectValue;
    this.triggerEvent(ipt, ‘input‘);
    this.emitEvent();
  }

  public removeField(i, e: MouseEvent, ipt) {
    e.preventDefault();
    if (this.collectValue.length > 0) {
      const index = this.collectValue.indexOf(i);
      this.collectValue.splice(index, 1);

      ipt.value = this.collectValue;
      this.triggerEvent(ipt, ‘input‘);
      this.emitEvent();
    }
  }

  public changeOne(value, id, ipt) {
    ipt.value = value;
  }

  public getChange(value, id, ipt) {
    ipt.value = this.collectValue.toString();
    this.triggerEvent(ipt, ‘input‘);
    this.emitEvent();
  }

  private triggerEvent(el, type) {
    const e = document.createEvent(‘HTMLEvents‘);
    e.initEvent(type, true, true);
    el.dispatchEvent(e);
  }

  public writeValue(value: any) {
    if (value && value !== this.collectValue) {
      this.collectValue = value;
    }
  }

  public setDisabledState?(isDisabled: boolean) {}
  public registerOnChange(fn: Function) {
    this.onChangeCallback = fn;
  }

  public registerOnTouched(fn: Function) {
    this.onTouchedCallback = fn;
  }

  public emitEvent() {
    const value = this.collectValue;
    this.valueChange.emit(value);
  }

  ngOnInit() {}

}

import { NgModule } from ‘@angular/core‘;
import { CommonModule } from ‘@angular/common‘;
import { FormsModule } from ‘@angular/forms‘;
import { NgZorroAntdModule } from ‘ng-zorro-antd‘;
import { DynamicInputNumComponent } from ‘./dynamic-input-num.component‘;

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgZorroAntdModule.forRoot(),
  ],
  declarations: [
    DynamicInputNumComponent,
  ],
  exports: [
    DynamicInputNumComponent,
  ]
})
export class DynamicInputNumModule { }