自定义下拉列表验证显示问题 - Angular2

Question

我正在使用primeng dropdown ..并使用反应式表单验证..一切正常但错误信息显示方式不正确

验证消息显示在页面load.since我写了下面的代码。有关我的代码的任何建议？或其他更好的方法来做到这一点。

<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

更改

<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'))">

您可能需要先检查是否先触摸它，然后再检查值0或错误required。