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>
<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);
}