mdbInputMask ignores and overrides when value is set through

Topic: mdbInputMask ignores and overrides when value is set through model.

nipun anand priority asked 1 year ago

Expected behavior When value is suppled through ngmodel i would expect input mask field to clear the mask and display supplied formatted values. Actual behavior input mask ignores all the bindings and only display masked texted. value is not bind to the model and nothing i type is displayed. Any suggestions or solution is greatly apricated. Resources (screenshots, code snippets etc.)

<div class="my-4 table-editor_input-wrapper">
    <mdb-form-control>
        <input mdbInputMask="h:mm:ss"
               [maskPlaceholder]="true"
               [charPlaceholder]="'h:mm:ss'"
               type="text"
               id="hours-input"
               class="form-control"
               autocomplete="off"
               [(ngModel)]="selectedDataRow.hoursString"/>

        <label mdbLabel class="form-label" for="hours-input">Hours</label>
    </mdb-form-control>
</div>

enter image description here

Rafał Seifert free commented 1 year ago

Could you provide the component class code so we can see what format of data you provide with [(ngModel)]="selectedDataRow.hoursString" Right now we can not recreate the error on our side.

nipun anand priority commented 1 year ago

Thank you for your response. After some testing I could make it work. Unfortunately this isn't fulfilling my requirement either.

I wanted to get or set the time (in hours) in a h:mm:ss format where input is limited to 8 hours windows. I can set the hours string only if I provide mdbInputMask="9:99:99" which kinda work but not the desired result as it allows wrong input in minutes and seconds. Any other mask like mdbInputMask=8:00:00 do not allow me to enter anything or just result into unperdictable behavior i.e mdbInputMask=7:59:59 results into "7:5m:5s".

As requested below is the component code and updated html.

import { Component,OnInit } from '@angular/core'; @Component({   selector: 'app-dummy',   templateUrl: './dummy.component.html',
    styleUrls: ['./dummy.component.scss'],
    providers: [] }) export class DummyComponent {

    hoursString:string = "4:59:22"; 
}

and below HTML should help you reproduce the behavior. You can modify the mdbInputMask to limit it to 8 hours.

<div class="my-4 table-editor_input-wrapper pt-5">
    <mdb-form-control>
        <input mdbInputMask="9:99:99"
               [maskPlaceholder]="true"
               [charPlaceholder]="'h:mm:ss'"
               type="text"
               id="hours-input"
               class="form-control"
               autocomplete="off"
               [(ngModel)]="hoursString" />

        <label mdbLabel class="form-label" for="hours-input">Hours</label>
    </mdb-form-control>
</div>

<p>Thank you for your response.
After some testing I could make it work. Unfortunately this isn't fulfilling my requirement either. </p>

<p>I wanted to get or set the time (in hours) in a h:mm:ss format where input is limited to 8 hours windows. I can set the hours string only if I provide  mdbInputMask="9:99:99" which kinda work but not the desired result as it allows wrong input in minutes and seconds. Any other mask like  mdbInputMask=8:00:00 do not allow me to enter anything or just result into unperdictable behavior i.e  mdbInputMask=7:59:59 results into "7:5m:5s".</p>

<p>As requested below is the component code and updated html. </p>

<pre class="prettyprint"><code>import { Component,OnInit } from '@angular/core'; @Component({   selector: 'app-dummy',   templateUrl: './dummy.component.html',
    styleUrls: ['./dummy.component.scss'],
    providers: [] }) export class DummyComponent {

hoursString:string = "4:59:22"; 
}
</code></pre>

<p>and below HTML should help you reproduce the behavior. You can modify the mdbInputMask to limit it to 8 hours.</p>

<label mdbLabel class="form-label" for="hours-input">Hours</label>
    </mdb-form-control>
</div>
</code></pre>

Please insert min. 15 characters.

Add comment

Rafał Seifert free answered 1 year ago

1 0 Best answer

Please insert min. 20 characters.

I think that the solution for you is to use customValidator. Please try this code and let me know if that helps your issue.

<input
        mdbInputMask="h:mi:se"
        [maskPlaceholder]="true"
        [charPlaceholder]="'h:mm:ss'"
        [customValidator]="'[0-8],[0-5],[0-9],[0-5],[0-9]'"
        [customMask]="'h,m,i,s,e'"
        type="text"
        id="hours-input"
        class="form-control"
        autocomplete="off"
        [(ngModel)]="hoursString"
 />

nipun anand priority commented 1 year ago

Provided solution worked like a charm. Thank you so much for that

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 4.1.0
Device: laptop
Browser: Chorme
OS: windows 10
Provided sample code: No
Provided link: No

nipun anand

5Support score
2Questions 1Answers 0Snippets