ng动态表单

html

 <div *ngFor="let control of listOfControl; let i = index">
        <nz-form-item>
            <nz-form-label nzXs="4" nzSm="4" [nzFor]="control.startTime">范围</nz-form-label>
            <nz-form-control nzXs="12" nzSm="12" nzMd="18">
                <nz-input-group nzCompact style="width: 100%;">
                    <nz-time-picker style="width: 47%;" formControlName="{{control.startTime}}" nzFormat="HH:mm"
                        nzPlaceHolder="开始"></nz-time-picker>
                    至
                    <nz-time-picker style="width: 47%;" formControlName="{{control.endTime}}" nzFormat="HH:mm"
                        nzPlaceHolder="结束"></nz-time-picker>
                </nz-input-group>
            </nz-form-control>


        </nz-form-item>

        <nz-form-item>
            <nz-form-label nzXs="2" nzSm="4" [nzFor]="control.executeUser">选择人</nz-form-label>
            <nz-form-control nzXs="8" nzSm="8" nzMd="20">

  

                <nz-select formControlName="{{control.executeUser}}"  nzMode="tags" nzPlaceHolder="选择人" style="width: 50%;">
                    <nz-option *ngFor="let option of userList" [nzLabel]="option.userName" [nzValue]="option.userLogin"></nz-option>
                  </nz-select>

                &nbsp;&nbsp;&nbsp;&nbsp;
                <i nz-icon nzType="minus-circle-o" class="dynamic-delete-button"
                    (click)="removeField(control, $event)"></i>
            </nz-form-control>
        </nz-form-item>
    </div>

    <nz-form-item>
        <nz-form-label nzXs="4" nzSm="4" nzNoColon>增加</nz-form-label>
        <nz-form-control nzXs="12" nzSm="12" nzMd="12">
            <button nz-button nzType="dashed" class="add-button" (click)="addField($event)">
                <i nz-icon nzType="plus"></i>
            </button>
        </nz-form-control>
    </nz-form-item>

ts

 listOfControl: Array<{ id: number; startTime: string; endTime: string; executeUser: string }> = [];

  addField(e?: MouseEvent): void {
    if (e) {
      e.preventDefault();
    }
    const id = this.listOfControl.length > 0 ? this.listOfControl[this.listOfControl.length - 1].id + 1 : 0;
    const control = {
      id,
      startTime: `startTime${id}`,
      endTime: `endTime${id}`,
      executeUser: `executeUser${id}`,
    };
    const index = this.listOfControl.push(control);
    this.form.addControl(this.listOfControl[index - 1].startTime, new FormControl(null, Validators.required));
    this.form.addControl(this.listOfControl[index - 1].endTime, new FormControl(null, Validators.required));
    this.form.addControl(this.listOfControl[index - 1].executeUser, new FormControl(null, Validators.required));
  }

  removeField(i: { id: number; startTime: string; endTime: string; executeUser: string; }, e: MouseEvent): void {
    e.preventDefault();
    if (this.listOfControl.length > 1) {
      const index = this.listOfControl.indexOf(i);
      this.listOfControl.splice(index, 1);
      this.form.removeControl(i.startTime);
      this.form.removeControl(i.endTime);
      this.form.removeControl(i.executeUser);
    }
  }

  dateFormat(data: any, format: string) {
    return this.datePipe.transform(data, format);
  }


  submit() {
    for (const i in this.form.controls) {
      this.form.controls[i].markAsDirty();
      this.form.controls[i].updateValueAndValidity();
    }
    const qualityPlanTimeList = [];
    this.listOfControl.forEach(res => {
      let startTime = '';
      let endTime = '';
      let executeUser = '';
      if (this.form.value[res.startTime] != null) {
        startTime = this.dateFormat(this.form.value[res.startTime], 'HH:mm');
      }

      if (this.form.value[res.endTime] != null) {
        endTime = this.dateFormat(this.form.value[res.endTime], 'HH:mm');
      }

      if (this.form.value[res.executeUser] != null) {
        executeUser = this.form.value[res.executeUser];
      }




      const timeData = {
        startTime: startTime,
        endTime: endTime,
        executeUser: executeUser.toString() == '' ? null : executeUser.toString(),
      }
      qualityPlanTimeList.push(timeData)
    })

    console.log(qualityPlanTimeList);

    this.form.value['list'] = qualityPlanTimeList;

    console.log(this.form.value);




  }