Stepper Animation Error

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Stepper Animation Error

allancmello pro asked a year ago

Expected behavior enter image description here Actual behavior enter image description here Resources (screenshots, code snippets etc.)

The component is not rendering the Check and the console shows a warning about an error in the animation.

enter image description here

r.seifert commented a year ago

Could you provide a sample code how you implement the stepper? Without the context we can not recreate the problem.

allancmello pro commented a year ago

Of course follow code below.

allancmello pro commented a year ago

Code Html:

<div mdbModal #newMkt="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog"
 aria-labelledby="myModalLabel" aria-hidden="true"
 [config]="{backdrop: false, ignoreBackdropClick: true}">
<div class="modal-dialog modal-dialog-centered modal-lg modal-notify modal-warning" role="document">
    <!--Content-->
    <div class="modal-content">
        <div class="modal-header">
            <p class="heading lead">AQUISIÇÃO DE CAMPANHAS</p>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="newMkt.hide()">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
        </div>
        <mdb-stepper #stepper>
            <mdb-step name="Campanha" [stepForm]="newMktForm">
            <form [formGroup]="newMktForm" class="mb-5">
                <div class="row mb-3">
                    <div class="col-md-6 form-sm">
                        <label class="mb-0 font-weight-bolder indigo-text" 
                            for="newMktFormDesc">Descrição</label>
                        <input type="text" formControlName="newDesc" 
                            class="form-control" id="newMktFormDesc" mdbInput mdbValidate 
                            [(ngModelChange)]="newMktForm"
                            placeholder="Informe a Descrição da Campanha"/>
                        <mdb-error class="ml-3 mt-4" *ngIf="newDesc.invalid && (newDesc.dirty || newDesc.touched)">
                            Descrição é requerido
                        </mdb-error>
                        <mdb-success *ngIf="newDesc.valid && (newDesc.dirty || newDesc.touched)"></mdb-success>
                    </div>
                    <div class="col-md-2 form-sm">
                        <label class="mb-0 font-weight-bolder indigo-text" 
                            for="newMktFormTotAdq">Peças</label>
                        <input type="number" class="form-control text-center" 
                            formControlName="newTotalAdq" id="newMktFormTotAdq"
                            mdbInput mdbValidate 
                            [(ngModelChange)]="newMktForm"/>
                        <mdb-error class="ml-3 mt-4" *ngIf="newTotalAdq.invalid && (newTotalAdq.dirty || newTotalAdq.touched)">Total Peças é requerido</mdb-error>
                        <mdb-success *ngIf="newTotalAdq.valid && (newTotalAdq.dirty || newTotalAdq.touched)"></mdb-success>
                    </div>                        
                    <div class="col-md-2 form-sm">
                        <label class="mb-0 font-weight-bolder indigo-text" 
                            for="newMktFormTotDias">Dias</label>
                        <input type="number" class="form-control text-center" 
                            id="newMktFormTotDias" formControlName="newTotalDias"
                            mdbInput mdbValidate [(ngModelChange)]="newMktForm"/>
                        <mdb-error class="ml-3 mt-4" *ngIf="newTotalDias.invalid && (newTotalDias.dirty || newTotalDias.touched)">
                            Quantidade de Dias da Campanha é requerido
                        </mdb-error>
                        <mdb-success *ngIf="newTotalDias.valid && (newTotalDias.dirty || newTotalDias.touched)"></mdb-success>
                    </div>                        
                    <div class="col-md-2 form-sm">
                        <label class="mb-0 font-weight-bolder indigo-text" 
                            for="newMktFormTotPgto">Total R$</label>
                        <input type="text" class="form-control text-center" 
                            id="newMktFormTotPgto" formControlName="newTotalPgto" 
                            mask="separator,2" mdbInput mdbValidate/>
                        <mdb-error class="ml-3 mt-4" *ngIf="newTotalPgto.invalid && (newTotalPgto.dirty || newTotalPgto.touched)">Requerido</mdb-error>
                        <mdb-success *ngIf="newTotalPgto.valid && (newTotalPgto.dirty || newTotalPgto.touched)"></mdb-success>
                    </div>
                </div>
            </form>
            <button mdbBtn size="sm" color="success" (click)="stepper.next()">CONTINUE</button>
            </mdb-step>
            <mdb-step name="Forma de Pgto" [stepForm]="tpPgtoForm">
                <form [formGroup]="tpPgtoForm" class="mb-5">
                    <div class="row mb-3">
                        <div class="col-md-4 form-sm">
                            <div class="form-check radio-black">
                                <mdb-icon size="2x" class="mr-1 text-dark" fas icon="qrcode" aria-hidden="true"></mdb-icon>
                                <input type="radio" class="form-check-input" id="radioGreen1" name="groupOfRadioGreen" checked mdbInput>
                                <label class="form-check-label" for="radioGreen1">Pix</label>
                            </div>  
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-4 form-sm">
                            <div class="form-check radio-black">
                                <mdb-icon size="2x" class="text-dark" fas icon="credit-card" aria-hidden="true"></mdb-icon>
                                <input type="radio" class="form-check-input" id="radioGreen2" name="groupOfRadioGreen" mdbInput>
                                <label class="form-check-label" for="radioGreen2">Cartão de Crédito</label>
                            </div>
                        </div>
                    </div>                        
                </form>    
                <button mdbBtn size="sm" color="dark" (click)="stepper.previous()">VOLTAR</button>
                <button mdbBtn size="sm" color="success" (click)="stepper.next()">CONTINUE</button>
            </mdb-step>
            <mdb-step name="Finalizar" [stepForm]="cardForm">
                <form [formGroup]="cardForm" class="mb-2">
                    <div class="card-container"></div>
                    <div class="row mb-3">
                        <div class="col-md-6 form-sm">
                            <label class="mb-0 font-weight-bolder indigo-text" 
                                for="cardFormNumber">Número Cartão</label>
                            <input type="text" formControlName="cardNumber" 
                                class="form-control" id="cardFormNumber" mdbInput mdbValidate 
                                [(ngModelChange)]="cardForm"
                                placeholder="XXXX XXXX XXXX XXXX"/>
                            <mdb-error class="ml-3 mt-4" *ngIf="cardNumber.invalid && (cardNumber.dirty || cardNumber.touched)">
                                Número do Cartão é requerido
                            </mdb-error>
                            <mdb-success *ngIf="cardNumber.valid && (cardNumber.dirty || cardNumber.touched)"></mdb-success>
                        </div>
                        <div class="col-md-2 form-sm">
                            <label class="mb-0 font-weight-bolder indigo-text" 
                                for="cardFormCvv">CVV</label>
                            <input type="number" class="form-control text-center" 
                                id="cardFormCvv" formControlName="cvv" mask="999"
                                mdbInput mdbValidate [(ngModelChange)]="newMktForm"
                                placeholder="123"/>
                            <mdb-error class="ml-3 mt-4" *ngIf="cvv.invalid && (cvv.dirty || cvv.touched)">
                                CVV é requerido
                            </mdb-error>
                            <mdb-success *ngIf="cvv.valid && (cvv.dirty || cvv.touched)"></mdb-success>
                        </div>                                                    
                    </div>
                </form>
                <div class="step-actions">
                    <button mdbBtn size="sm" color="dark" (click)="stepper.previous()">VOLTAR</button>                        
                    <button mdbBtn  size="sm" color="success" (click)="onSubmit()">PAGAR</button>
                </div>
            </mdb-step>
        </mdb-stepper>
    </div>
</div>

Imports from AppModule: StepperModule, WavesModule

allancmello pro commented a year ago

Imports style.scss:

@import "ng-uikit-pro-standard/assets/scss/core/mixins";
@import "ng-uikit-pro-standard/assets/scss/core/colors";
@import "ng-uikit-pro-standard/assets/scss/core/variables";
@import "ng-uikit-pro-standard/assets/scss/core/variables-pro";
@import "ng-uikit-pro-standard/assets/scss/core/msc/skins-pro";
@import "ng-uikit-pro-standard/assets/scss/addons-pro/_ecommerce-pro.scss"; 
@import "ng-uikit-pro-standard/assets/scss/sections-pro/_pricing-pro.scss";

allancmello pro commented a year ago

In the Pro documentation it indicates that I can declare the StepperModule.forRoot(), but when it is declared with forRoot(), it generates an error, not accepting the .forRoot() declaration in the StepperModule module.

It is a strange behavior to generate error for .forRoot(), of the module. Since the documentation says it should be declared as StepperModule.forRoot().

Here: enter image description here

allancmello pro commented a year ago

Error generated when I declare StepperModule.forRoot() in AppModule.

Value at position 3 in the NgModule.imports of AppModule is not a reference

Value could not be determined statically.(-991010)

app.module.ts(105, 5): Unable to evaluate this expression statically.

app.module.ts(105, 5): Unable to evaluate an invalid expression.

Property 'forRoot' does not exist on type 'typeof StepperModule'.ts(2339)

Version MDBootstrap 14.

Arkadiusz Idzikowski staff answered a year ago

We are already aware of this warning, but it should be visible only in dev environment and it should not affect the component animation in any way.

As for the problem with module, it seems like there is an incorrect name in the Modules list documentation. We will fix that, please use StepperModule instead.

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 4.1.0
  • Device: All
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
steppers css-animation
Related topics
3
Stepper Height
2
MDB Pro - Linear Stepper will not submit form
1
How do I build an Angular stepper with validation?
0
Problème steppers color icone circle
0
Stepper show and shown listeners?
About author
allancmello
Pro User
140Support score
26Questions 9Answers
0Snippets likes 0Snippets