Как я могу заставить всплывающее окно загружаться только из формы, которую я загружаю с помощью кнопки редактирования?

#angular #typescript

Вопрос:

Я пытаюсь разместить всплывающее окно, в котором можно записать изменения, внесенные в форму, это всплывающее окно должно появляться только тогда, когда я нажимаю кнопку редактирования, которая загружает форму редактирования, потому что кнопка «Nueva Actividad» загружает форму resgitre, в которой есть некоторые элементы, которые обновляются, поэтому, если я сделаю это с помощью типа формы, всплывающее окно также появится в форме регистрации. Как я могу заставить всплывающее окно загружаться только из формы, которую я загружаю с помощью кнопки редактирования?

введите описание изображения здесь
введите описание изображения здесь
введите описание изображения здесь

Код кнопки «Guardar»

  handleSave = () => {
    ValidateFormFields(this.form);
    if (!this.form.valid) {
      return;
    }
    const { id, formType } = this.store.selectSnapshot(CONTAINER_STATE_TOKEN);

    
    const fechaEvento = this.form.get('fechaEvento').value.format("M")
    const fecha = new Date();
    const mesActual = fecha.getMonth()   1;
    const hoy = fecha.getDate();
 
    if (fechaEvento > mesActual) {
      if (hoy > 15) {
        console.log("puedess regitrar")
        ValidateFormFields(this.form);
        if (!this.form.valid) {
          return;
        }
        this.alertService.confirm(MESSAGES.CONFIRM_GUARDAR_GENERAL).subscribe(result => {
          if (result.confirm) {
            const { session } = this.store.selectSnapshot(APP_STATE_TOKEN);
            const { value: formValue } = this.form;



            const horaEvento = moment(formValue.fechaEvento.format(CONSTANTS.DATE_FORMAT)   ' '   formValue.horaEvento, `${CONSTANTS.DATE_FORMAT} hh:mm a`);

            const data = {
              ...formValue,
              idLinea: session.session.lineaid,
              idSolicitante: session.session.personid,
              idUsuarioRegistra: session.session.userid,
              idTipoSolicitud: TipoSolicitudEnum.ACTIVIDAD,
              horaEvento
            };

            const { id, formType } = this.store.selectSnapshot(CONTAINER_STATE_TOKEN);
      
            if (formType == FormType.EDITAR) {

           

              this.store.dispatch(new ContainerActions.ActualizarFormulario({
                id,
                data
              })).subscribe(() => {
                this.toastService.success(MESSAGES.GUARDAR_SOLICITUD_DATOS_GENERALES_SUCCESS);
              });

            
            } else {
              this.store.dispatch(new ContainerActions.GuardarFormulario({ data })).subscribe(() => {
                this.toastService.success(MESSAGES.GUARDAR_SOLICITUD_DATOS_GENERALES_SUCCESS);
                const { id } = this.store.selectSnapshot(CONTAINER_STATE_TOKEN);
                this.location.go(ROUTES_URL.SOLICITUDES.EDITAR(id));
              });
            }

          }
        });
      }
 

ТАБЛИЦА HTML

 <ng-container *ngIf="state$ | async as state">

  <app-page-title-bar [text]="state.title"></app-page-title-bar>

  <app-form-buscar-solicitud></app-form-buscar-solicitud>

  <div class="m-t-10 m-b-10">Resultados de la búsqueda</div>

  <ng-container *ngTemplateOutlet="tplButtons; context: {$implicit: state.loading}"></ng-container>

  <lib-grid
    [loading]="state.loading"
    [source]="state.gridSource"
    [definition]="state.gridDefinition">
    <ng-template libTemplate="tipo-actividad">
      {{TipoSolicitudDescripcionEnum.ACTIVIDAD}}
    </ng-template>
    <ng-template
      libTemplate="tpl-opciones"
      let-data>
      <button
        matTooltip="Editar Actividad"
        class="mini-icon-button"
        mat-icon-button
        color="primary"
        (click)="handleClickEdit(data)">
        <mat-icon>edit</mat-icon>
      </button>

      <button
        matTooltip="Eliminar Actividad"
        class="mini-icon-button"
        mat-icon-button
        color="primary"
        (click)="handleClickDelete(data)">
        <mat-icon>delete</mat-icon>
      </button>

    </ng-template>
  </lib-grid>

</ng-container>

<ng-template
  #tplButtons
  let-loading>
  <div>
    <button
      class="m-r-5"
      color="primary"
      mat-flat-button
      (click)="handleClickNuevo()"
      [disabled]="loading">
      <mat-icon>add</mat-icon>
      Nueva Actividad
    </button>
  </div>
</ng-template>
 

Комментарии:

1. Я не совсем понял его. Можете ли вы объяснить это более ясно?

2. можете ли вы показать нам html-код, который включает ваш метод щелчка по таблице..

3. @ApoorvaChikara Мне нужно, чтобы он показывал мне всплывающее окно каждый раз, когда я редактирую что-то в форме и нажимаю кнопку «Guardar», когда я нажимаю «Nueva Actvidad», в моей форме есть части, в которых используется обновление, поэтому я также получу всплывающее окно с запросом о внесенных мной изменениях, и я не хочу, чтобы я просто хотел, чтобы всплывающее окно появлялось при загрузке формы с кнопки редактирования, которая имеет форму карандаша.

4. @ganesh045 Я уже выложил html таблицы

5. что вы получите, если добавите console.log(item); handleClickEvent() метод