question-Angular2 d'affichage de validation personnalisée menu déroulant

Question

J'utilise dropdown..and primeng utilisé forme réactive validation..Everything fonctionne bien, mais la façon dont l'affichage du message d'erreur n'est pas bon

message de validation apparaît sur la charge de page. depuis que j'ai écrit code.any suggestion suivante à propos de mon code? ou une autre meilleure façon de le faire.

<input type="password" class="form-control" name="ClientUserPassword" placeholder="Enter Password" 
                  [(ngModel)]="objClientUserDetails.ClientUserPassword" 
                  [ngClass]="{'error':!formClientUser.controls['ClientUserPassword'].valid && (formClientUser.controls['ClientUserPassword'].dirty 
                  ||formClientUser.controls['ClientUserPassword'].touched) 
                  || (objClientUserDetails.ClientUserPassword == '' || 
                  objClientUserDetails.ClientUserPassword == undefined)}" 
                  [formControl]="formClientUser.controls['ClientUserPassword']" /> 

                <div *ngIf="objClientUserDetails.ClientUserPassword == '' || (formClientUser.controls['ClientUserPassword'].hasError('required') && 
                   formClientUser.controls['ClientUserPassword'].touched)" class="alert alert-danger"> 
                 Please Enter Password 
                </div> 

<p-dropdown [options]="listOfClientUserRoles" 
                   [filter]="true" 
                   placeholder="Select Role" 
                   formControlName="cboClientUserRole" 
                   [(ngModel)]="objClientUserDetails.StrClientUserRoleId" 
                   (onChange)="OnRoleChangeChange($event)"></p-dropdown> 

                <div *ngIf="objClientUserDetails.StrClientUserRoleId=='0'|| ((formClientUser.controls['cboClientUserRole'].hasError('required')) &&(formClientUser.controls['cboClientUserRole'].touched))" 
                 class="alert alert-danger">Please select Role</div> 

Answer 1

changement

<div *ngIf="objClientUserDetails.StrClientUserRoleId=='0'|| ((formClientUser.controls['cboClientUserRole'].hasError('required')) &&(formClientUser.controls['cboClientUserRole'].touched))"> 

à

<div *ngIf="formClientUser.controls['cboClientUserRole'].touched && (objClientUserDetails.StrClientUserRoleId=='0' || formClientUser.controls['cboClientUserRole'].hasError('required'))"> 

Vous pouvez vérifier si elle est d'abord touché, et vérifier la valeur 0 ou une erreur required plus tard.