Angular11 NgbModal通过脚本添加或删除模态windowClass

Question

当包含的ReactiveForm被提交并且无效时，我想添加一个css动画类到ngb-modal window元素。这样做的最佳实践是什么？

目前在我的onStationEditSubmit()方法中，我将我的submitted属性设置为true，检查我的stationEdit:FormGroup属性的invalid属性，如果它是无效的，我只是简单地返回，但是这里我也想在invalid上添加"shake“动画类。

注意:我还希望确保，如果是第二次提交是无效的，我删除并添加动画类，如果需要动画再次发生。

我确实有一个指向ng- ElementRef元素的ViewChild模板传递给注入的NgbModal实例，在该实例上调用打开方法，但不知道是否可以使用该实例或从NgbModal.open调用返回的NgbModalRef来实现我的目标。

下面是我的组件：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { NgBlockUI, BlockUI } from 'ng-block-ui';
import { FormGroup, FormBuilder, Validators, NgForm } from '@angular/forms';
@Component({
  selector: 'app-stationedit',
  templateUrl: './stationedit.component.html',
  styleUrls: ['./stationedit.component.css']
})
export class StationEditComponent implements OnInit {

  @BlockUI('basicModals') blockUIBasicModals: NgBlockUI;
  @BlockUI('modalThemes') blockUIModalThemes: NgBlockUI;
  @ViewChild('f', { read: true }) userProfileForm: NgForm;
  @ViewChild('stationModalRef', { static: true }) stationModalRef: ElementRef;
  stationEdit: FormGroup;
  submitted = false;
  stationModal: NgbModalRef;
  constructor(private modalService: NgbModal, private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    console.log('In Station Edit');
    this.stationEdit =  this.formBuilder.group({
        name: ['', Validators.required],
        description: ['', Validators.required],
      });
  }

  get f() {
    return this.stationEdit.controls;
  }
  addNewStation(stationModalRef) {
    this.modalService.open(stationModalRef, { windowClass: 'animated bounceInDown' });
  }

  onStationEditSubmit() {
    this.submitted = true;

    if (this.stationEdit.invalid) {
      //I would like to shake the window on invalid submission by adding the "shake" class to the ngb-modal-window element

      return;
    }
  }


}

这是我的模板：

<div class="station-edit">
  <!-- Station Edit start -->
  <div class="form-group">
    <!-- Button trigger modal -->
    <button class="btn btn-lg btn-primary"
            (click)="addNewStation(stationModalRef)">
      Launch Modal
    </button>
    <!-- Modal -->
    <ng-template class="modal text-left" #stationModalRef let-c="close" let-d="dismiss">

      <div class="modal-header">
        <h5 class="modal-title" id="stationModalTitle"><i class="la la-fw la-rocket"></i>Add New Station</h5>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <form [formGroup]="stationEdit" (ngSubmit)="onStationEditSubmit()">
        <div class="modal-body">
          <div class="form-body">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="stationName">Name *</label>
                  <input type="text" id="stationName" class="form-control" formControlName="name"
                         placeholder="Name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }">
                  <div class="form-text text-muted danger invalid-feedback" *ngIf="submitted && f.name.errors">
                    <small *ngIf=" f.name.errors.required">
                      Name is required
                    </small>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label for="stationDescription">Description *</label>
                  <textarea id="stationDescription" rows="5" class="form-control" formControlName="description"
                            placeholder="Enter a Description for this station"
                            [ngClass]="{ 'is-invalid': submitted && f.description.errors }"></textarea>
                  <div class="form-text text-muted danger invalid-feedback" *ngIf="submitted && f.description.errors">
                    <small *ngIf=" f.description.errors.required">
                      Description is required
                    </small>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        <div class="modal-footer form-actions">
          
            <button type="button" class="btn btn-warning mr-1" (click)="d('Close modal')">
              <i class="feather ft-x"></i> Cancel
            </button>
            <button type="submit" class="btn btn-primary" >
              <i class="la la-check"></i> Save
            </button>
          </div>
      </form>
    </ng-template>
  </div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////-->

Answer 1

为了解决这个问题，我做了以下工作：

在需要的地方使用原生document.querySelector获取nativeModalElement引用，并使用nativeModalElement.classList.remove和nativeModalElement.classList.add。

1. 向我的组件添加了一个shakeWindow()方法，以便在延迟时添加headShake类。

shakeWindow() {
    const nativeModalElement = document.querySelector('ngb-modal-window.modal');
    nativeModalElement.classList.add('headShake');
}

1. 删除了我的onStationEditSubmit类中存在的动画类，并使用setTimeout调用延迟了50ms的shakeWindow方法。

onStationEditSubmit() {
    this.submitted = true;

    if (this.stationEdit.invalid) {
      //Want to shake the window on invalid submission
      const nativeModalElement = document.querySelector('ngb-modal-window.modal');
      this.renderer.removeClass(nativeModalElement, 'headShake');
      this.renderer.removeClass(nativeModalElement, 'fade');
      this.renderer.removeClass(nativeModalElement, 'bounceInDown');
      setTimeout(this.shakeWindow, 50);
      return;
    }
}

我无法想象这是最好的实践方法，所以我会欢迎一个更固执己见的角度解决方案。

注意:我不知道如何使用QueryList或其他ViewChild/ViewChild方法来完成此任务。