artsite/zorro/src/app/pages/epg/epg-clone.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message';
import { firstValueFrom } from 'rxjs';
import { FormUtils } from 'src/app/lib/utils/form-utils';
import { EpgService } from './epg.service';

@Component({
  selector: 'app-epg-copy',
  template: `

<div style="color: orange; margin-bottom: 10px">
  <i nz-icon nzType="info-circle" nzTheme="outline"></i>
  <ng-container i18n>克隆源: {{srcEpg.epgId}},  请输入新的EPG信息: </ng-container>
</div>

<form [formGroup]="form" autocomplete="off" (ngSubmit)="onSubmit()" novalidate class="form-horizontal ">
  <nz-form-item>
    <nz-form-control i18n-nzErrorTip nzErrorTip="请输入新epgId">
      <nz-input-group nzPrefixIcon="user">
        <input nz-input formControlName="epgId" i18n-placeholder placeholder="新 EPG id">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control i18n-nzErrorTip nzErrorTip="请输入描述信息">
      <nz-input-group nzPrefixIcon="user">
        <input nz-input formControlName="desc" i18n-placeholder placeholder="描述">
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>

  <div class="d-flex flex-row-reverse">
    <button nz-button nzType="primary" nzBlock type="submit" [disabled]="isLoading" i18n>拷贝</button>
  </div>
</form>

  `,
  styles: [
  ]
})
export class EpgCloneComponent implements OnInit {
  @Input() srcEpg: any;
  @Output() onSuccess = new EventEmitter<any>();
  @Output() onError = new EventEmitter<any>();

  form: FormGroup;
  isLoading = false;

  constructor(
    private epgService: EpgService,
    private fb: FormBuilder,
    private message: NzMessageService,
  ) { }

  ngOnInit(): void {
    this.form = this.fb.group({
      epgId: [null, [Validators.required]],
      desc: [null],
    })
  }

  
  onSubmit() {
    if (this.form.invalid) {
      FormUtils.markAsDirty(this.form);
      return;
    }
    this.isLoading = true;
    let data = Object.assign({}, this.form.value, { columns: this.srcEpg.columns, status: this.srcEpg.status });
    firstValueFrom(this.epgService.epgAdd(data))
      .then(res => {
        this.onSuccess.emit(data);
        this.message.success($localize`添加成功, 请继续完善栏目信息`);
      })
      .catch(err => {
        this.message.error(err.error?.message || err.message);
        this.onError.emit(err);
      }).then(() => {
        this.isLoading = false;
      })
  }

}