custom dropdown validation display issue-Angular2

Question

I am using primeng dropdown..and used reactive form validation..Everything working fine but the way error message display is not proper

validation message shows up on page load.since i written following code.any suggestion about my code? or other better way to do this.

<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>

Maybe the "StrClientUserRoleId === 0" on load? – Ørjan Jun 23 '17 at 12:34 — Ørjan, Jun 23 '17 at 12:34

score 0 · Answer 1 · answered Jun 24 '17 at 19:21

Change

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

to

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

You may want to check if it is touched first, and check the value 0 or error required later.

custom dropdown validation display issue-Angular2

1 Answers1