Angular11 NgbModal Add or Remove Modal windowClass via script - angular-reactive-forms

Question

I would like to add a css animation class to the ngb-modal-window element when the contained ReactiveForm is submitted and is invalid. What is the best practice for doing so?
Currently within my onStationEditSubmit() method I set my submitted property to true check the invalid property of my stationEdit:FormGroup property and if it is invalid I simply return but here is where I would like to also add the "shake" animation class on invalid.
Note: I would also like to make sure that if it is a second submission is invalid that I remove and add the animation class if necessary for the animation to occur again.
I do have a ViewChild ElementRef to the ng-template element passed to the injected NgbModal instance upon which the open method is called, but didn't know if it was possible to use that or the NgbModalRef returned from the NgbModal.open call to accomplish my goal.
Here is my component:
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;
}
}
}
Here is my template:
<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">×</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

In order to solve this I did the following:
used the native document.querySelector to get my nativeModalElement reference where required and used nativeModalElement.classList.remove and nativeModalElement.classList.add.
Added a shakeWindow() method to my component to add the headShake class on delay.
shakeWindow() {
const nativeModalElement = document.querySelector('ngb-modal-window.modal');
nativeModalElement.classList.add('headShake');
}
removed the animation classes that were present in my onStationEditSubmit class and used setTimeout to call the shakeWindow method delayed by 50ms.
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;
}
}
I cannot imagine this is the best practice approach so I would welcome a more opiniated Angular solution.
Note: I could not figure out how to use a QueryList or other ViewChild/ViewChildren method to accomplish this task.