p-button 和 togglemask 在单击输入之前不会呈现

Question

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>

Answer 1

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 .

Answer 2

I've reproduced the issue on StackBlitz , and there seems to be a quite unambiguous error (that you don't see?):

Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

Which is totally right, you're mixing reactive forms with normal forms. If you meant to use normal forms, then the form element should be removed from the DOM and the form submission should be handled at the button level:

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

<button pButton type="submit" (onClick)="login()" label="Sign in"></button>

<!--</form>-->

If you meant to use reactive forms, the ngModel bindings should be replaced with the formControlName attributes:

<input
  id="username"
  type="text"
  pInputText
  class="p-inputtext-lg"
  formControlName="username"
/>

<p-password
  id="password"
  class="p-inputtext-lg"
  [toggleMask]="true"
  formControlName="password"
></p-password>