используйте ту же форму для добавления и обновления

Question

Я хочу использовать ту же угловую диалоговую форму для добавления и редактирования. Пожалуйста, помогите мне :) Мой Component.html с 2 щелчками, чтобы добавить-редактировать форму:

<div class="piece-demande-content section-container mb-4 pt-3 container">
  <!--header-->
  <div class="card-header libelle-color-piece-jointe">
    <div class="row">
      <div class="col-lg-6 max-with-100">
        <div class="row" [ngClass]="{'active':activateItemForLateralMenu===Anchors.LISTE_PIECES_DEMANDEES}">
          <div class="col-lg-1">
            <span class="icon  logo-piece-demandee"></span>
          </div>
          <div class="col-lg-11"><h4 class="section-title text-uppercase">{{'pieceDemande.titre'|translate}}</h4></div>
        </div>
      </div>
      <div class="col-lg-6 text-right">
        <button mat-stroked-button type="submit" (click)="openDialog()">
          <mat-icon class="blue-theme example-icon logo-piece-add" svgIcon="logo-piece-add"></mat-icon>
          {{'pieceDemande.btn-ajoutPiece'|translate}}
        </button>
      </div>
    </div>
  </div>
  <!--Fin header-->
  <div class="row mb-3">
    <div class="col-12">
      <table class="mat-table">
        <thead>
        <tr class="mat-row no-border">
          <th class="mat-header-cell ">{{'pieceDemande.piece'|translate}}</th>
          <th class="mat-header-cell text-center">{{'pieceDemande.dateDemande'|translate}}</th>
          <th class="mat-header-cell text-center">{{'pieceDemande.dateReception'|translate}}</th>
          <th class="mat-header-cell text-center">{{'pieceDemande.observation'|translate}}</th>
          <th class="mat-header-cell text-center">{{'common.edition'|translate}}</th>
          <th class="mat-header-cell text-center">{{'common.suppression'|translate}}</th>
        </tr>
        </thead>
        <tbody>
        <tr class="mat-row no-border" *ngFor="let element of dossier.demandesPieces">
          <td class="mat-cell "> {{element.libelle}} </td>
          <td class="mat-cell text-center"> {{element.dateDemande}} </td>
          <td class="mat-cell text-center"> {{element.dateReception}} </td>
          <td class="mat-cell text-center"> {{element.observations}} </td>
          <td class="mat-cell mat-column-edition">
            <mat-icon class="blue-theme example-icon logo-detail-edit" svgIcon="logo-detail-edit" (click)="openDialog()"></mat-icon>
          </td>
          <td class="mat-cell mat-column-suppression">
            <mat-icon class="blue-theme example-icon logo-piece-delete" svgIcon="logo-piece-delete" (click)="onClickDeletePiece(element.id)"></mat-icon>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

-Component.ts:

@Component({
  selector: 'app-piece-demande',
  templateUrl: './piece-demande.component.html',
  styleUrls: ['./piece-demande.component.scss']
})

export class PieceDemandeComponent implements OnInit {
  public isFormDisplayed: boolean = false;


  // Accéder à l'énum dans la vue
  Anchors = Anchors;
  date = new Date();
// Dialog attributs
  animal: string;
  name: string;
  // Anchor Menu latéral activé
  activateItemForLateralMenu: string;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  private dossier: DossierDto;

  constructor(
    private readonly iconRegistry: MatIconRegistry,
    private readonly dossierComponent: DossierComponent,
    private readonly sanitizer: DomSanitizer,
    private readonly activatedRoute: ActivatedRoute,
    private readonly dossierMetierService: DossierMetierService,
    private readonly translateService: TranslateService,
    private readonly snacbackService: SnacbackService,
    private readonly formBuilder: FormBuilder,
    private readonly dialog: MatDialog) {
    iconRegistry.addSvgIcon(
      'logo-piece-jointe',
      sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-piece-jointe.svg'));
    iconRegistry.addSvgIcon(
      'logo-piece-add',
      sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-piece-add.svg'));
    iconRegistry.addSvgIcon(
      'logo-piece-delete',
      sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-piece-delete.svg'));
    iconRegistry.addSvgIcon(
      'logo-detail-edit',
      sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-detail-edit.svg'));
    iconRegistry.addSvgIcon(
      'logo-check',
      sanitizer.bypassSecurityTrustResourceUrl('./assets/images/icons/logo-check.svg'));
  }


  ngOnInit() {


    this.dossier = this.dossierComponent.dossier;
    uiStore.subscribe((evt) => {
      this.activateItemForLateralMenu = evt.activatedItemForLateralMenu;
    });
  }

  /*
    Open dialog method
   */
  openDialog(): void {

    const dossier = this.dossier;
    const dialogRef = this.dialog.open(AppDialogPieceDemandeViewComponent, {
      width: '500px',
      disableClose: true,
      panelClass: 'sciven-dialog-style',
      data: {dossier}
    });


    dialogRef.afterClosed().subscribe(result => {
      this.animal = result;
      console.log('result', result);
    });
  }

  /**
   * Au click sur la suppression d'un utilisateur
   * @param id
   */
  onClickDeletePiece(id: number) {

    //Ouverture d'une pop-up de de demande de confirmation de suppression
    const confirmSuppressionDialog = this.dialog.open(DialogConfirmViewComponent, {
      panelClass: 'sciven-dialog-style',
      disableClose: true,
      data: {dialogText: 'common.confirm-suppression', confirmText: 'oui', cancelText: 'non'}
    });
    confirmSuppressionDialog.afterClosed().subscribe(result => {

      //Confirmation de la supppression
      if (result === 'true') {
        let params: RemovePieceDemandeeParams = {
          idDemandePiece: id,
          idDossier: this.dossier.id
        };
        this.dossierMetierService.deletePiece(params);
        this.snacbackService.add(this.translateService.instant('common.success-suppression', {}));
      } else {
        this.snacbackService.add(this.translateService.instant('common.echec-suppression', {}));
      }
    });
  }
}

export interface DialogData {
  dossier: DossierDto;

}

-DialogComponent.html:

<div class="sciven-dialog-style">

  <div mat-dialog-actions class="mat-dialog-action">
    <mat-icon class="red-theme logo-piece-delete" svgIcon="logo-piece-delete" (click)="onNoClick()"></mat-icon>
  </div>
  <div class="title-container  mb-3">
    <span class="icon logo-piece-demandee"></span>
    <span class="sciven-popin-title-weight text-uppercase">{{'pieceDemande.dialogTitre'|translate}}</span>
  </div>

  <form [formGroup]="pieceDemandeForm" (ngSubmit)="onSubmitForm()">
    <div mat-dialog-content>

      <mat-form-field class="sciven-mat-form-field">
        <mat-select formControlName="typePiece" placeholder="{{'pieceDemande.dialogType-piece'|translate}}" required>
          <mat-option *ngFor="let piece of listTypePiece" [value]="piece.id">{{piece.libelle}}</mat-option>
        </mat-select>
      </mat-form-field>


      <mat-form-field class="sciven-mat-form-field sciven-mat-form-field-width">
        <input matInput [matDatepicker]="dateDemande" placeholder="{{'pieceDemande.dialogDate-demande'|translate}}" formControlName="dateDemande" required>
        <mat-datepicker-toggle matSuffix [for]="dateDemande"></mat-datepicker-toggle>
        <mat-datepicker #dateDemande></mat-datepicker>
      </mat-form-field>


      <mat-form-field class="sciven-mat-form-field sciven-mat-form-field-width">
        <input matInput [matDatepicker]="dateReception" placeholder="{{'pieceDemande.dialogDate-reception'|translate}}" formControlName="dateReception">
        <mat-datepicker-toggle matSuffix [for]="dateReception"></mat-datepicker-toggle>
        <mat-datepicker #dateReception></mat-datepicker>
      </mat-form-field>


      <mat-form-field class="sciven-mat-form-field">
        <textarea matInput placeholder="{{'pieceDemande.observation'|translate}}" formControlName="observations"></textarea>
      </mat-form-field>
    </div>
    <div mat-dialog-actions class="sciven-mat-dialog-action-right">
      <button mat-stroked-button type="submit"
              class="sciven-matdialog-action-color validate-icon">{{'common.valide'|translate}}
      </button>
    </div>
  </form>

</div>

-DialogComponent.ts:

@Component({
      selector: 'app-dialog-piece-demande-view',
      templateUrl: 'dialog-piece-demande-view.html'
    })
    export class AppDialogPieceDemandeViewComponent implements OnInit {

      // FMode édition formulaire  'CREATION' ou 'EDITION'
      pieceDemandeForm: FormGroup;
      listTypePiece: PieceDemandeeDto[];
      private dossier: DossierDto;
      private create: boolean = false;


constructor(
        private readonly formBuilder: FormBuilder,
        private readonly piecesDemandeeService: PiecesDemandeeService,
        private readonly dossierMetierService: DossierMetierService,
        private readonly snacbackService: SnacbackService,
        private readonly translateService: TranslateService,
        public dialogRef: MatDialogRef<AppDialogPieceDemandeViewComponent>,
        @Inject(MAT_DIALOG_DATA) public data: DialogData) {
        this.dossier = data.dossier;
        this.create = data.create;
        this.pieceDemandeForm = formBuilder.group({
          dateDemande: ['', Validators.required],
          dateReception: [''],
          typePiece: ['', Validators.required],
          observations: ['', Validators.maxLength(300)]
        });
      }

      ngOnInit() {
        this.piecesDemandeeService.getPiecesDemandee().subscribe(listTypePiece => this.listTypePiece = listTypePiece
        );
      }


      onSubmitForm() {
        let newdemandePiece = this.convertFormTopieceDemandeDto();
        let params: AddPieceDemandeeParams = {
          pieceDemandee: newdemandePiece,
          iddossier: this.dossier.id
        };
        this.dossierMetierService.addNewPiece(params).subscribe((result) => {
            this.dialogRef.close();
            this.dossier.demandesPieces.push(result);
            this.snacbackService.add(this.translateService.instant('common.success-add'));
          }, (error) => {
            this.snacbackService.add(this.translateService.instant('common.echec-add'));
          }
        );
      }

      /**
       * Conversion Formulaire
       */
      convertFormTopieceDemandeDto(): DemandePieceDto {
        let demandePiece = new DemandePieceUpdate();
        let form = this.pieceDemandeForm.value;
        demandePiece.dateDemande = form.dateDemande;
        demandePiece.dateReception = form.dateReception;
        demandePiece.observations = form.observations;
        demandePiece.idPieceDemandee = form.typePiece;

        return demandePiece;
      }

      onNoClick(): void {
        this.dialogRef.close();
      }
    }

Я уже реализую свою функцию добавления с помощью метода, который я вызываю с обратной стороны. Я хочу реализовать издание с тем же диалогом