p-button and togglemask not render until clicking input

Issue

I am using p-button and togglemask="true" from PrimeNG. But they do not render in the html initially until clicked. I want to know why and how to fix this! Thank you!

// user-login.component.html

<main>
    <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">

        <h2>Sign in</h2>        

        <div>
            <span class="p-float-label">
                <input id="username" type="text" pInputText class="p-inputtext-lg"
                [(ngModel)]="username">
                <label for="username">Username</label>
            </span>
        </div>
    
        <div>
            <span class="p-float-label">
                <p-password id="password" class="p-inputtext-lg" [toggleMask]="true"
                    [(ngModel)]="password"></p-password>
                <label for="password">Password</label>
            </span>
        </div>

    
        <div>
            <button pButton type="submit" label="Sign in"></button>
        </div>
    </form>
    
    <div>
        <span>New User?</span>
        <button pButton type="button" [routerLink]="'/signup'" label="Create account" class="p-button-text"></button>
    </div>
    
</main>

This is the initial page I have without clicking any button in the page.

• The togglemask in password input box is not showing.
• The button is also not showing in desired styling.

// password input without togglemask
<p-password _ngcontent-sqf-c60="" id="password" class="p-element p-inputwrapper p-inputtext-lg"><div><input pinputtext="" class="p-inputtext p-component p-element"><!--container--><!--container--><!--container--></div></p-password>

// button
<button _ngcontent-dxo-c60="" pbutton="" type="submit" label="Sign in" class="p-element" ng-reflect-label="Sign in"></button>

Only after clicking the input box, ng-untouched ng-pristine ng-valid added to the <form> would the button show with styling, like this.

• The togglemask appears but in the wrong position.

// password input with togglemask in wrong position
<p-password _ngcontent-sqf-c60="" id="password" class="p-element p-inputwrapper p-inputtext-lg p-password-mask ng-untouched ng-pristine ng-valid" ng-reflect-toggle-mask="true">
    <div ng-reflect-ng-class="[object Object]" class="">
        <input pinputtext="" class="p-inputtext p-component p-element" ng-reflect-ng-class="[object Object]" type="password">
        <!--bindings={
  "ng-reflect-ng-if": "false"
}--><i ng-reflect-ng-class="pi pi-eye" class="pi pi-eye"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    </div>
</p-password>

// button
<button _ngcontent-ale-c60="" pbutton="" type="submit" label="Sign in" class="p-element p-button p-component" ng-reflect-label="Sign in">
    <span class="p-button-label">Sign in</span>
</button>

After clicking the password input box I get the desired styling like this.

// password input with desired togglemask
<p-password _ngcontent-sqf-c60="" id="password" class="p-element p-inputwrapper p-inputtext-lg p-password-mask ng-untouched ng-pristine ng-valid" ng-reflect-toggle-mask="true">
    <div ng-reflect-ng-class="[object Object]" class="p-password p-component p-inputwrapper p-input-icon-right">
        <input pinputtext="" class="p-inputtext p-component p-element p-password-input" ng-reflect-ng-class="[object Object]" type="password">
        <!--bindings={
  "ng-reflect-ng-if": "false"
}--><i ng-reflect-ng-class="pi pi-eye" class="pi pi-eye"></i><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!--bindings={
  "ng-reflect-ng-if": "false"
}-->
    </div>
</p-password>

Solution

Based on the error mentioned by skink, I fixed the problem by simply adding name attribute in <input> as follow:

<input id="username" type="text" pInputText
            [(ngModel)]="username" name="username"required>

The reason using name attribute is specified in angular doc.

Answered By - popular coffee