I'm using ABP 2.1.2 and on a form I have some controls hidden in a <div> with an *ngIf but when the <div> is revealed the floating labels don't animate so the user's text is badly merged with the label text.
component.html
<div bsModal #createServiceProviderModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog"
aria-labelledby="createDigitalAssetModal" aria-hidden="true" [config]="{backdrop: 'static'}">
<div class="modal-dialog">
<div #modalContent class="modal-content">
<div class="modal-header">
<button type="button" class="close" (click)="close()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
<span>{{l("CreateNewServiceProvider")}}</span>
</h4>
</div>
<div id="identify" *ngIf="step == 'identify'">
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input materialInput id="emailAddress" type="email" name="EmailAddress" [(ngModel)]="serviceProvider.emailAddress" required class="validate form-control">
<label for="emailAddress" class="form-label">{{l("EmailAddress")}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
{{l("Cancel")}}
</button>
<button class="btn btn-info waves-effect" (click)="findServiceProvider()">
{{l("Next")}}
</button>
</div>
</div>
<form *ngIf="active" #createServiceProviderForm="ngForm" id="frm_create_serviceProvider" novalidate (ngSubmit)="save()">
<div id="add" *ngIf="step == 'create'">
<div class="modal-body">
<div class="row clearfix">
<div class="col-sm-12">
<div class="form-group form-float">
<div class="form-line">
<input id="companyName" type="text" name="CompanyName" [(ngModel)]="serviceProvider.companyName" required class="validate form-control">
<label for="companyName" class="form-label">{{l("CompanyName")}}</label>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<input id="name" type="text" name="Name" [(ngModel)]="serviceProvider.name" required class="validate form-control">
<label for="name" class="form-label">{{l("Name")}}</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<input id="surname" type="text" name="Surname" [(ngModel)]="serviceProvider.surname" required class="validate form-control">
<label for="surname" class="form-label">{{l("Surname")}}</label>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-float">
<div class="form-line">
<input id="emailAddress" type="text" name="emailAddress" [(ngModel)]="serviceProvider.emailAddress" disabled class="validate form-control">
<label for="emailAddress" class="form-label">{{l("EmailAddress")}}</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
{{l("Cancel")}}
</button>
<button [disabled]="!createServiceProviderForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
{{l("Save")}}
</button>
</div>
</div>
<div id="identify" *ngIf="step == 'confirm'">
<div class="modal-body">
<span class="text-success">{{l('ServiceProviderAlreadyExists')}}</span>
<br>
<table class="table">
<tr>
<td class="col-span-3"><label class="pull-right">{{l('Name')}}</label></td>
<td>{{serviceProvider.name}}</td>
</tr>
<tr>
<td><label class="pull-right">{{l('Surname')}}</label></td>
<td>{{serviceProvider.surname}}</td>
</tr>
<tr>
<td><label class="pull-right">{{l('Company')}}</label></td>
<td>{{serviceProvider.companyName}}</td>
</tr>
<tr>
<td><label class="pull-right">{{l('Email Address')}}</label></td>
<td>{{serviceProvider.emailAddress}}</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="close()">
{{l("Cancel")}}
</button>
<button [disabled]="!createServiceProviderForm.form.valid || saving" type="submit" class="btn btn-primary waves-effect">
{{l("Save")}}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
component.ts
import { Component, ViewChild, Injector, Output, EventEmitter, ElementRef } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { ServiceProviderServiceProxy, ServiceProviderDto } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/app-component-base';
@Component({
selector: 'create-service-provider-modal',
templateUrl: './create-service-provider.component.html'
})
export class CreateServiceProviderComponent extends AppComponentBase {
@ViewChild('createServiceProviderModal') modal: ModalDirective;
@ViewChild('modalContent') modalContent: ElementRef;
@Output() modalSave: EventEmitter<any> = new EventEmitter<any>();
serviceProvider: ServiceProviderDto = new ServiceProviderDto({id: 0, isUser: false});
step: string = "identify";
active: boolean = false;
saving: boolean = false;
constructor(
injector: Injector,
private serviceProviderService: ServiceProviderServiceProxy,
) {
super(injector);
}
show(): void {
this.active = true;
this.modal.show();
this.serviceProvider = new ServiceProviderDto({id: 0, isUser: false});
this.step = "identify";
}
onShown(): void {
$.AdminBSB.input.activate($(this.modalContent.nativeElement));
}
save(): void {
this.saving = true;
this.serviceProviderService.create(this.serviceProvider)
.finally(() => { this.saving = false; })
.subscribe(() => {
this.notify.info(this.l('SavedSuccessfully'));
this.close();
this.modalSave.emit(null);
});
}
close(): void {
this.active = false;
this.modal.hide();
}
findServiceProvider(): void {
this.saving = true;
abp.ui.setBusy();
this.serviceProviderService.getUserAsProvider(this.serviceProvider.emailAddress)
.finally(() => {
this.saving = false;
abp.ui.clearBusy();
})
.subscribe((next) => {
console.log(next);
if (next.id !== undefined) {
this.serviceProvider = next;
this.step = "confirm";
}
else {
this.step = "create";
}
})
}
}
Issue
When this modal is displayed the variable step is set to "identify" and the first section is displayed where the user must capture the service provider's email address. When the user clicks 'Next' I check if the service provider already exists and then change step to either "create" or "confirm". When the div for creating a service provider is displayed the labels for the input don't animate
Presumably I must re-run some kind of animation script but I cannot figure out what. Please help!
I think the problem was that I needed to call onShown() after revealing the div