Primeng: SET value to InputMask doesn't work on PrimeNG 9.0.3 - 9.1

Created on 7 Apr 2020  路  10Comments  路  Source: primefaces/primeng

I'm submitting a ... (check one with "x")
[x ] bug report => Search github for a similar issue or PR before submitting

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/github-onunqt

Current behavior
I want to set value to InputMask which is part of form but it doesn't work. The input is empty.
It works on PrimeNG version 9.0.0.

Expected behavior
The input should have value which has been set in ngOnInit().

Minimal reproduction of the problem with instructions
app.component.ts
```import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
contactPersonForm: FormGroup;

constructor() {}

ngOnInit(): void {
this.contactPersonForm = new FormGroup({
name: new FormControl('John', [Validators.required, Validators.maxLength(64)]),
surname: new FormControl('Doe', [Validators.required, Validators.maxLength(64)]),
email: new FormControl('john.[email protected]', [Validators.email, Validators.maxLength(128)]),
phone: new FormControl('+999 123 456 789', [Validators.maxLength(32)])
//I tested these values for phone: +999 123 456 789, +999123456789, 999123456789. Nothing works.
});
}
}

**app.component.html**
```<form [formGroup]="contactPersonForm" (ngSubmit)="onSubmit()">
    <div class="p-grid ui-fluid form-group field-create">
        <div class="p-col-12">
            <span class="md-inputfield">
                <input type="text" pInputText formControlName="name" maxlength="64" />
                <label>Name</label>
            </span>
        </div>
        <div class="p-col-12">
            <span class="md-inputfield">
                <input type="text" pInputText formControlName="surname" maxlength="64" />
                <label>Surname</label>              
            </span>
        </div>
        <div class="p-col-12">
            <span class="md-inputfield">
                <input type="text" pInputText formControlName="email" maxlength="128" />
                <label>Email</label>
            </span>
        </div>
        <div class="p-col-12">
            <span class="md-inputfield">
                <p-inputMask formControlName="phone" mask="+999 999 999 999"></p-inputMask>
                <label>Phone</label>
            </span>
        </div>
        <div class="p-col-12">
            <button
                pButton
                style="width: auto;"
                type="button"
                label="Save"
                [disabled]="contactPersonForm.invalid"
            ></button>
            <button
                pButton
                class="ui-button-secondary entry-button"
                style="width: auto;"
                type="button"
                label="Cancel"
            ></button>
        </div>
    </div>
</form>
defect

Most helpful comment

Created a pull request. Hopefully @cagataycivici will merge it soon

All 10 comments

I have the same problem since version 9.0.3.
It's ok on version 9.0.2.

This is a problem with the latest version. Stackblitz example: https://stackblitz.com/edit/angular-pnaohu

The example provides 2 scenarios: creating editors as part of a form group and another from a form array.

  • The input mask editor does not show a default value in any scenario.
  • If you select the input mask editor but do not change anything then exit the editor, the form value will clear.

I still have the problem in 9.0.6...That's a very critical issue in my case. Could we hope to have a fix in the next version?

Still not working in version 9.1.0.

Still not working in version 9.1.0.

I confirm, could you take over this issue for 9.1.1
Thanks

was this problem resolved in 9.1.1?

PrimeNG 9.1.1 is not released yet.

Created a pull request. Hopefully @cagataycivici will merge it soon

@cagataycivici can you please specify when this when will this issue will get merge (so i can make comment to my manager :) and remove the dirty fix)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Helayxa picture Helayxa  路  3Comments

garethlewis picture garethlewis  路  3Comments

Helayxa picture Helayxa  路  3Comments

gatapia picture gatapia  路  3Comments

KannanMuruganmony picture KannanMuruganmony  路  3Comments