0

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

目前在我的onStationEditSubmit()方法中，我将提交的属性设置为 true 检查我的属性的无效属性stationEdit:FormGroup，如果它无效，我只需返回，但在这里我还想在无效时添加“摇晃”动画类。

注意：我还想确保如果第二次提交无效，我会删除并添加动画类，以便动画再次发生。

我确实有一个 ng-template 元素的 ViewChild ElementRef 传递给调用 open 方法的注入的 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>
<!-- ////////////////////////////////////////////////////////////////////////////-->
4

1 回答 1

0

为了解决这个问题，我做了以下事情：

使用本机 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 调用了延迟 50 毫秒的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;
    }
}

我无法想象这是最佳实践方法，所以我会欢迎更自以为是的 Angular 解决方案。

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

于 2021-01-24T21:07:25.560 回答