引导模式卡在 Angular 中的第一条消息上

Question

该模式仅适用于第一条消息，如果我发送新消息，则不会出现。

我正在使用： 角17 引导程序 5.3

这是ts文件

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '../../services/user/user.service';
import { iUserDTO } from '../../models/iUserDTO';
import * as bootstrap from 'bootstrap';

@Component({
  selector: 'app-users-add',
  templateUrl: './users-add.component.html',
  styleUrls: ['./users-add.component.css']
})
export class UsersAddComponent {
  myForm: FormGroup;
  modalMessage: string = '';
  modalHeader: string = '';
  identificationNumber = 0;
  names = '';
  surnames = '';
  isUserMaster = '';

  constructor(
    private fb: FormBuilder,
    private userService: UserService,    
    private route: ActivatedRoute,
    private router: Router
  ) {
    this.myForm = this.fb.group({
      identificationNumber: ['', [Validators.required, Validators.pattern('^[0-9]+$'), Validators.maxLength(25)]],
      firstName: ['', [Validators.required, Validators.pattern('^[a-zA-Z ]+$'), Validators.maxLength(100)]],
      lastName: ['', [Validators.required, Validators.maxLength(100)]],
      userMaster: ['no', Validators.required]
    });
  }

  private showModal(message: string, header: string): void {
    this.modalMessage = message;    
    this.modalHeader = header;
    const modalElement = document.getElementById('errorModal');
    
    if (modalElement) {
      const modal = new bootstrap.Modal(modalElement);      
      modal.show();

      // Add event listener to reset form when modal is closed
      modalElement.addEventListener('hidden.bs.modal', () => {                
        
        if(header === 'Éxito'){
          this.resetForm();
        }
        modal.dispose();          
      }, { once: true });
    } else {
      console.error('No se encontró el elemento modal con id "errorModal".');
    }    
  } 

  private resetForm(): void {
    const userMasterValue = this.myForm.get('userMaster')?.value;
    this.myForm.reset({
      identificationNumber: '',
      firstName: '',
      lastName: '',
      userMaster: userMasterValue
    });    
  }

  onSubmit() {
    if (this.myForm.valid) {      

      const user: iUserDTO = {
        IdUser: 0,
        IdentificationNumber: this.myForm.value.identificationNumber,
        Names: this.myForm.value.firstName,
        Surnames: this.myForm.value.lastName,
        UserMaster: this.myForm.value.userMaster === 'yes'
      };

      this.userService.saveData(user).subscribe(
        response => {          
          this.showModal(response.message, 'Éxito');
        },
        error => {
          const errorMessage = error.error?.message || 'Error desconocido';
          this.showModal(errorMessage, 'Error');
        }
      );
    } else {
      this.showModal('Formulario inválido', 'Error');
    }
  }
}

这是 html，这里，关闭按钮位于页脚部分，正如本网站上的帖子所建议的那样

<!-- users-add.component.html -->
<div class="container users-add">
  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <div class="section">
      <div class="section-header">
        <h4>CODIGO DEL USUARIO</h4>
      </div>
      <div class="section-body">
        <div class="mb-3 form-group">
          <label for="identificationNumber" class="form-label">Número de Identificación</label>
          <input type="text" id="identificationNumber" formControlName="identificationNumber" class="form-control" [ngClass]="{'is-invalid': myForm.get('identificationNumber')?.invalid && myForm.get('identificationNumber')?.touched}">
          <div class="invalid-feedback" *ngIf="myForm.get('identificationNumber')?.invalid && myForm.get('identificationNumber')?.touched">
            Número de Identificación es requerido y solo puede contener números (máximo 25 caracteres).
          </div>
        </div>
      </div>
    </div>
    <div class="section mt-4">
      <div class="section-header">
        <h4>DATOS DEL USUARIO</h4>
      </div>
      <div class="section-body">
        <div class="mb-3 form-group">
          <label for="firstName" class="form-label">Nombres</label>
          <input type="text" id="firstName" formControlName="firstName" class="form-control" [ngClass]="{'is-invalid': myForm.get('firstName')?.invalid && myForm.get('firstName')?.touched}">
          <div class="invalid-feedback" *ngIf="myForm.get('firstName')?.invalid && myForm.get('firstName')?.touched">
            Nombres es requerido y solo puede contener letras y espacios (máximo 100 caracteres).
          </div>
        </div>
        <div class="mb-3 form-group">
          <label for="lastName" class="form-label">Sobrenombres</label>
          <input type="text" id="lastName" formControlName="lastName" class="form-control" [ngClass]="{'is-invalid': myForm.get('lastName')?.invalid && myForm.get('lastName')?.touched}">
          <div class="invalid-feedback" *ngIf="myForm.get('lastName')?.invalid && myForm.get('lastName')?.touched">
            Sobrenombres es requerido (máximo 100 caracteres).
          </div>
        </div>
        <div class="mb-3 form-group">
          <label class="form-label">Es UserMaster</label>
          <div class="form-check-group">
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" formControlName="userMaster" id="userMasterYes" value="yes">
              <label class="form-check-label" for="userMasterYes">Sí</label>
            </div>
            <div class="form-check form-check-inline">
              <input class="form-check-input" type="radio" formControlName="userMaster" id="userMasterNo" value="no" checked>
              <label class="form-check-label" for="userMasterNo">No</label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- Modal -->
<div class="modal fade" id="errorModal" tabindex="-1" aria-labelledby="errorModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 translate class="modal-title" id="errorModalLabel">{{ modalHeader }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div translate class="modal-body">
        {{ modalMessage }}
      </div>
      <div class="modal-footer">
        <button translate type="button" class="btn btn-secondary" data-bs-dismiss="modal">CLOSE</button>
      </div>
    </div>
  </div>
</div>

我检查了我所有的逻辑，没问题，是bootstrap有bug什么的。

我尝试重置表单、模式消息和处理。

当我将它与已经存在的数据一起使用时，它会正确显示错误消息，如果我更改数据，它会卡住并显示第一条消息。

Answer 1

您应该初始化模态一次，删除并添加事件侦听器以重置表单并使用绑定侦听器上下文。你可以用这个方法试试

private modal: bootstrap.Modal | null = null;
private modalElement: HTMLElement | null = null;
//...
constructor(){
//...
//at the end of constructor add
this.modalElement = document.getElementById('errorModal');
if (this.modalElement) {
    this.modal = new bootstrap.Modal(this.modalElement);
  }
}

//showModal updated:
private showModal(message: string, header: string): void {
    this.modalMessage = message;
    this.modalHeader = header;

    if (this.modal && this.modalElement) {
      this.modal.show();

      // Remove all event listeners to prevent multiple bindings
      this.modalElement.removeEventListener('hidden.bs.modal', this.resetFormListener);

      // Add event listener to reset form when modal is closed
      this.modalElement.addEventListener('hidden.bs.modal', this.resetFormListener.bind(this), { once: true });
    } else {
      console.error('No se encontró el elemento modal con id "errorModal".');
    }
  }

  private resetFormListener(): void {
    if (this.modalHeader === 'Éxito') {
      this.resetForm();
    }
  }